End-to-end testing with ReactJS and Puppeteer

This content originally appeared on Level Up Coding - Medium and was authored by Mohammad Faisal

Let’s test a real-life application with Puppeteer in ReactJS

Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

It can be used to automate tasks in the browser, such as generating screenshots and PDFs or tracking user interactions.

It can also be used for web scraping, testing, and crawling. But today, we will use it for end-to-end testing.

Today we will learn how to do end-to-end testing with Jest and Puppeteer in a ReactJS application.

What is end-to-end testing?

End-to-end testing is software testing, where the software is tested from start to end.

It is also called black-box testing because it tests the software without knowing the application’s internal structure.

Let’s get started!

Create the boilerplate project.

First, we need to create a new ReactJS project. We will use the create-react-app tool to do that.

npx create-react-app e2e-react - language typescript

And you should have a basic React application now.

Setup with create-react-app.

To setup Puppeteer with Create React App, we need to install the following dependencies:

npm install - save-dev jest-puppeteer puppeteer

And add the following script to the package.json file:

"scripts": {
  "test": "react-scripts test --env=jsdom --watchAll=false"
}

And that’s it! We are ready to start writing our tests.

Other dependencies

We will need to install the following dependencies:

• Jest — Our test runner
• Puppeteer — Our browser automation tool
• Jest-Puppeteer — A Jest plugin to run Puppeteer tests

Run the following command to install them:

cd e2e-react
npm install - save jest puppeteer jest-puppeteer

Configure Jest

Then first, we need to add the jest configuration file. Create a file called jest.config.js in the root of the project and add the following content:

module.exports = {
  preset: "jest-puppeteer",
  testMatch: ["**/tests/**/*.test.js"],
  verbose: true,
};

Here we are telling Jest to use the jest-puppeteer preset and to look for tests in the tests folder.

Then we need to add the following script to the package.json file:

"scripts": {
  "test": "jest"
}

Configure Puppeteer

Then, we need to create a new file called jest-puppeteer.config.js in the project’s root. This file will contain the configuration for Puppeteer.

module.exports = {
  launch: {
    headless: process.env.HEADLESS !== "false",
    slowMo: process.env.SLOWMO ? parseInt(process.env.SLOWMO, 10) : 0,
    devtools: process.env.DEVTOOLS === "true",
    product: "chrome",
    args: [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--disable-dev-shm-usage",
      "--disable-accelerated-2d-canvas",
      "--disable-gpu",
      "--window-size=1920,1080",
    ],
  },
};

Here we are telling Puppeteer to run in headless mode, not to use the sandbox, to disable the GPU, and to set the window size to 1920x1080.

We are also telling the puppeteer to use the Chrome browser. If you want to use the Firefox browser, you can change the `product` property to `firefox`.

We can also set the slowMo option to slow down the execution of the tests. This is useful for seeing what is happening in the browser.

We can set this option by selecting the SLOWMO environment variable. For example, to set the slowMo to 100ms, we can run the following command:

SLOWMO=100 npm test

Create the test

We will create a simple test that will open the browser, navigate to the Google homepage, and search for the word “puppeteer”.

// __tests__/google.test.js
const puppeteer = require("puppeteer");

describe("Google", () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should display "google" text on page', async () => {
    await page.goto("https://google.com");
    await page.waitForSelector('input[title="Search"]');
    await page.type('input[title="Search"]', "puppeteer");
    await page.keyboard.press("Enter");
    await page.waitForNavigation();
    const html = await page.$eval("body", (e) => e.innerHTML);
    expect(html).toMatch("puppeteer");
  });
});

So this was a generic example of how to use Puppeteer with Jest. You can use this as a starting point to write your tests.

Now let’s focus on a real-world example.

A Real-world example

We will create a form that will allow a user to log in. The form will have two fields: username and password. Let’s create the form component.

// src/components/LoginForm.tsx
import React, { useState } from "react";

export const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Username: " + username + " Password: " + password);
    setIsLoggedIn((prev) => !prev);
  };

  return (
    <div>
      <h1 id="page-title">{isLoggedIn ? "Logged In" : "Login"}</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">Username</label>
          <input
            type="text"
            id="username"
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <button type="submit" id="btn-submit">
          Login
        </button>
      </form>
    </div>
  );
};

The text “Logged In” will be displayed when the user clicks the submit button. This is because we use the useState hook to set the isLoggedIn state to true.

Now let’s create the test. Create a new test file called login.test.js in the tests folder.

First, import the launch function from the jest-puppeteer package.

const launch = require("puppeteer").launch;

Then set up the beforeAll and afterAll hooks.

beforeAll(async () => {
  browser = await launch({
    headless: false,
    slowMo: 100,
    devtools: true,
  });
  page = await browser.newPage();
});

afterAll(async () => {
  await browser.close();
});

Here we are telling Puppeteer to run in headless mode and to set the slowMo to 100ms.

Then we must create a test to check if the login form is displayed.

it("should display the login form", async () => {
  await page.goto("http://localhost:3000");
  await page.waitForSelector("#page-title");
  const pageTitle = await page.$eval("#page-title", (e) => e.innerHTML);
  expect(pageTitle).toMatch("Login");
});

This test will navigate to the application’s root, wait for the page title to be displayed, and then check if the page title is “Login”.

Now let’s create a test to check if the user can log in.

it("should allow the user to log in", async () => {
  await page.goto("http://localhost:3000");
  await page.waitForSelector("#username");
  await page.type("#username", "test");
  await page.type("#password", "test");
  await page.click("#btn-submit");
  await page.waitForSelector("#page-title");
  const pageTitle = await page.$eval("#page-title", (e) => e.innerHTML);
  expect(pageTitle).toMatch("Logged In");
});

To find a particular item on the screen:

await page.waitForSelector("#username");

Here username is the id field of the input element.

Also, we can emulate user actions like typing and clicking.

await page.type("#username", "test");
await page.type("#password", "test");
await page.click("#btn-submit");

This test will navigate to the root of the application, wait for the username field to be displayed, type the username and password, click the submit button, wait for the page title to be displayed, and then check if the page title is “Logged In”.

The final code for the test is as follows:

// __tests__/login.test.js

const launch = require("puppeteer").launch;

describe("Login", () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await launch({
      headless: false,
      slowMo: 100,
      devtools: true,
    });
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it("should display the login form", async () => {
    await page.goto("http://localhost:3000");
    await page.waitForSelector("#page-title");
    const pageTitle = await page.$eval("#page-title", (e) => e.innerHTML);
    expect(pageTitle).toMatch("Login");
  });

  it("should allow the user to log in", async () => {
    await page.goto("http://localhost:3000");
    await page.waitForSelector("#username");
    await page.type("#username", "test");
    await page.type("#password", "test");
    await page.click("#btn-submit");
    await page.waitForSelector("#page-title");
    const pageTitle = await page.$eval("#page-title", (e) => e.innerHTML);
    expect(pageTitle).toMatch("Logged In");
  });
});

Conclusion

In this article, we learned how to use Puppeteer with Jest. We also created a real-world example that will allow us to test a login form.

We learned how to navigate to a page, find an element, and emulate user actions like typing and clicking.

We also learned how to use the beforeAll and afterAll hooks to set up and tear down the browser.

GitHub Repository:

• react-e2e-testing-puppeteer

## Resources

- Puppeteer

- Jest

Level Up Coding

Thanks for being a part of our community! Before you go:

• 👏 Clap for the story and follow the author 👉
• 📰 View more content in the Level Up Coding publication
• 💰 Free coding interview course ⇒ View Course
• 🔔 Follow us: Twitter | LinkedIn | Newsletter

🚀👉 Join the Level Up talent collective and find an amazing job

End-to-end testing with ReactJS and Puppeteer was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Level Up Coding - Medium and was authored by Mohammad Faisal

Print Share Comment Cite Upload Translate Updates

APA

Mohammad Faisal | Sciencx (2023-03-06T03:50:27+00:00) End-to-end testing with ReactJS and Puppeteer. Retrieved from https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/

MLA

" » End-to-end testing with ReactJS and Puppeteer." Mohammad Faisal | Sciencx - Monday March 6, 2023, https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/

HARVARD

Mohammad Faisal | Sciencx Monday March 6, 2023 » End-to-end testing with ReactJS and Puppeteer., viewed ,<https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/>

VANCOUVER

Mohammad Faisal | Sciencx - » End-to-end testing with ReactJS and Puppeteer. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/

CHICAGO

" » End-to-end testing with ReactJS and Puppeteer." Mohammad Faisal | Sciencx - Accessed . https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/

IEEE

" » End-to-end testing with ReactJS and Puppeteer." Mohammad Faisal | Sciencx [Online]. Available: https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/. [Accessed: ]

rf:citation

» End-to-end testing with ReactJS and Puppeteer | Mohammad Faisal | Sciencx | https://www.scien.cx/2023/03/06/end-to-end-testing-with-reactjs-and-puppeteer/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.