• Node 13.3.0
• npm 6.13.2
• yarn 1.21.1
• puppeteer 2.0.0
• create-react-app 3.3.0

1. Static Testing: uses a static type system like TypeScript, ReasonML, Flow or a linter like ESLint. This helps in capturing basic errors like typos and syntax.
2. Unit Testing: the smallest part of an application, also known as a unit, is tested.
3. Integration Testing: multiple related units are tested together to see if the application works perfectly in combination.
4. End-to-end Testing: the entire application is tested from start to finish, just like a regular user would, to see if it behaves as expected.

$ npx create-react-app e2e-puppeteer

$ cd e2e-puppeteer
$ yarn start

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import React from 'react';
import { render } from '@testing-library/react'; // 1
import App from './App';

test('renders learn react link', () => { // 2
  const { getByText } = render(<App />); // 3
  const linkElement = getByText(/learn react/i); // 4
  expect(linkElement).toBeInTheDocument(); // 5
});

1. We import the render function from the @testing-library/react package.
2. We then use the global test function from Jest, which is our test runner installed by default through CRA. The first parameter is a string which describes our test, and the second parameter is a function where we write the code we want to test.
3. Next up, we render the App component and destructure a method called getByText, which searches for all elements that have a text node with textContent.
4. Then, we call the getByText function with the text we want to check. In this case, we check for learn react with the case insensitive flag.
5. Finally, we make the assertion with the expect function to check if the text exists in the DOM.

$ yarn test

Testing the Boilerplate with Puppeteer

$ yarn add -D puppeteer

import puppeteer from "puppeteer"; // 1

let browser;
let page;

// 2
beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: false
  });
  page = await browser.newPage();
  await page.goto("http://localhost:3000/");
});

// 3
test("renders learn react link", async () => {
  await page.waitForSelector(".App");

  const header = await page.$eval(".App-header>p", e => e.innerHTML);
  expect(header).toBe(`Edit <code>src/App.js</code> and save to reload.`);

  const link = await page.$eval(".App-header>a", e => {
    return {
      innerHTML: e.innerHTML,
      href: e.href
    };
  });
  expect(link.innerHTML).toBe(`Learn React`);
  expect(link.href).toBe("https://reactjs.org/");
});

// 4
afterAll(() => {
  browser.close();
});

1. Firstly, we import the puppeteer package and declare some global variables, browser and page.
2. Then we have the beforeAll function provided by Jest. This runs before all tests are run. Here, we launch a new Chromium browser by calling puppeteer.launch(), while setting headless mode to false so we see what's happening. Then, we create a new page by calling browser.newPage() and then go to our React application's URL http://localhost:3000/ by calling the page.goto() function.
3. Next up, we wait for the .App selector to load. When it loads, we get the innerHTML of .App-header>p selector by using the page.$eval() method and compare it with Edit src/App.js and save to reload.. We do the same thing with the .App-header>a selector. We get back innerHTML and href and then we compare them with Learn React and https://reactjs.org/ respectively to test our assertion with Jest's expect() function.
4. Finally, we call the afterAll function provided by Jest. This runs after all tests are run. Here, we close the browser.