Project Setup

Let’s begin by setting up a basic React App. We will install other dependencies such as Puppeteer and Faker.

For the sake of this post, I have created a simple app that contains a form and renders a success message on form submission. Clone this app into your system.

git clone https://github.com/rajatgeekyants/test.git

Now, let’s install dev dependencies.

yarn install

We don’t need to install Jest which is already pre-installed in the React package. If you try to install it again, your test will not work as the two Jest versions will conflict with each other.

Next, we need to update the test script inside package.json to call Jest. We will also add another script called debug . This script is going to set our Node environment variable to debug mode and call npm test .

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "jest",

"debug": "NODE_ENV=debug npm test",

"eject": "react-scripts eject",

}

Using Puppeteer, we can run our test headless or live inside a Chromium browser. This is a great feature to have, as it allows us to see what views, DevTools, and network requests the tests are evaluating. The only drawback is that it can make things really slow in Continuous Integrations (CI).

We can use environment variables to decide whether to run our tests headless or not. I will set up my tests in such a way that that when I want to see them evaluated, I can run the debug script. When I don’t, I’ll run the test script.

Go to src/App and create a new file called App.test.js . Write this code inside it.

We first tell our app that we require Puppeteer. Then, we describe our first test, where we check on the initial page load. Here I am testing whether the h1 tag contains the correct text.

Inside our test’s description, we need to define our browser and page variables. These are required to walk through the test.

The launch method helps us pass through config options to our browser, and lets us control and tests our apps in different browser settings. We can even change the settings of the browser page by setting the emulation options.

Let’s set up our browser first. I have created a function named isDebugging at the top of the file. We will call this function inside the launch method. This function will have an object called debugging_mode that contains three properties:

headless: false — Whether we want to run our tests headless ( true ) or in the Chromium browser ( false )

— Whether we want to run our tests headless ( ) or in the Chromium browser ( ) slowMo: 250 — Slow down the Puppeteer operations by 250 milliseconds.

— Slow down the Puppeteer operations by 250 milliseconds. devtools: true — Whether the browser should have DevTools open ( true ) while interacting with the app.

The isDebugging function will then return a ternary statement that is based on the environment variable. The ternary statement decides whether the app should return the debuggin_mode object or an empty object.

Back in our package.json file, we had created a debug script which will set our Node environment variable to debug. Instead of our test, the isDebugging function is going to return our customized browser options, which is dependent on our environment variable debug .

Next, we are setting some options for our page. This is done inside the page.emulate method. We are setting the viewport properties of width and height , and set a userAgent as an empty string.