E2E testing of React applications could be done with multiple frameworks, including WebdriverIO, Cypress, or Puppeteer. In this blog post, we going to see how to setup Puppeteer with Jest and run builds in continuous integration with Travis CI.

First lets create simple single page react app

npx create-react-app my-app
cd my-app
npm start

Second, let’s add jest and puppeteer to our react app, so we can execute end-to-end testing. Install puppeteer and jest-puppeteer:

npm install --save-dev puppeteer jest-puppeteer

Next add e2e script to your package.json file

"e2e": "cd e2e && jest"

Now we need to create our e2e folder in root directory and add spec file:

const puppeteer = require('puppeteer');

describe('SPA Regression Test', () => {
    let browser
    let page

    beforeEach(async function () {
        browser = await puppeteer.launch({
            headless: false,
            slowMo: 20,
            devtools: false,
            args: ['--start-fullscreen'],
        })
        page = await browser.newPage()
        await page.setDefaultTimeout(30000)
        await page.setDefaultTimeout(30000)
        await page.setViewport({width: 1920, height: 1080});
        jest.setTimeout(30000);
    })

    afterEach(async function () {
        await browser.close()
    })

    it('Launch SPA app', async () => {
        await page.goto(ENV_LOCAL);
        await page.screenshot({path: 'local_env.png'});
    })
})

We will also need to add jest config file

module.exports = {
    globals: {
        ENV_LOCAL: "http://localhost:3000"
    },
};

And the last step is to configure Travis continuous integration, so every time there is a new pull request we can build and test our application. We will need to add .travis.yml configuration

os: linux
dist: trusty
sudo: required
language: node_js
node_js:
  - "stable"
addons:
  chrome: stable
  hostname: localhost
before_install:
  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
before_script:
  - yarn start &
cache:
  yarn: true
  directories:
    - node_modules
install:
  - yarn install
script:
  - yarn e2e

Hope you like this blog post, you can find source code here . Feel free to post any questions, suggestions in the comments section below.