Search⌘ K
AI Features
Home
Courses
Complete Guide to Testing React Apps with Jest and Selenium

Project Setup for Selenium

Explore the steps to set up Selenium for integration testing in a React app. Learn to install necessary packages, configure Jest and Babel, create helper functions, and write your first integration test to verify setup correctness.

We'll cover the following...

As mentioned before, integration tests require more setup. To implement them, we will use the Selenium framework. This is a tool to control the browser programmatically. We will still use Jest as a test runner and reporter but with a custom config. Firstly, you need to install the dependencies:

$ npm i -D selenium-webdriver chromedriver

selenium-webdriver are the JS bindings for Selenium, and chromedriver is the JS binding and a distribution of the Google Chrome browser driver. Once you have it installed, you need to create config files for jest and babel. Both are needed to enable ES6 Modules (import/export statements) and Generator Runtime (async/await statements). Create a file jest.config.js in the project root:

JavaScript (JSX)
module.exports = {
  transform: {
    "^.+\\.jsx?$": "babel-jest"
  },
};

And babel.config.json in the same location:

JavaScript (JSX)
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

Since the testing code will only run on the developer’s machine (or DevOps pipeline), we do not have to worry about compatibility. But we can assume we will get a reasonable NodeJS installation and not Internet Explorer 6.

Note ...