Complete Guide to Testing React Apps with Jest and Selenium/

...

/

Project Setup for Selenium

Project Setup for Selenium

Learn how to set up Selenium in a React project, and understand the additional libraries that you will need.

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:

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

And babel.config.json in the same location:

{
  "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 ...