Features

React Testing with Selenium

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews

React is a JavaScript library which is developed by Facebook. Meta used React to build the Instagram.com website. One of the advantages of using React is that it allows frontend and web developers to quickly create user interfaces (UI) for websites.

In this article we'll go over the possibilities to test React based websites, using the React Testing Library and Selenium.

What is React Testing Library?

React Testing Library was built specifically to test React components. It builds on top of the DOM Testing Library and adds APIs to test any React component. It is a light-weight solution to create tests, with an emphasis on creating maintainable tests. It is mostly run using Jest, but can be used with other test libraries, provided you install jsdom and global-jsdom.

Several functions are added on top of react-dom and react-dom/test-utils, encouraging best testing practices.

The library, which is a replacement for Enzyme, adds methods to locate elements in the DOM by using a data-testid attribute.

To install React Testing Library, simply execute the following command:

Copy code
npm install --save-dev @testing-library/react

How can I write a React test?

Once you've installed React Testing Library, you can quickly add your very first test, either in Javascript or Typescript. See the example below, where we'll render a React component, perform various actions and finally verify the outcome.

Copy code
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import Fetch from './fetch'

test('displays pricing', async () => {
  // ARRANGE

  render(<fetch url="/pricing"></fetch>)

  // ACT

  await userEvent.click(screen.getByText('Purchase'))
  await screen.findByRole('heading')

  // ASSERT

  expect(screen.getByRole('heading')).toHaveTextContent('thank you')
  expect(screen.getByRole('button')).toBeDisabled()
})

In the example above, we'll open the Pricing page, click on Purchase and verify if there was a thank you message.

How can I use Selenium to test React websites?

Selenium is an open-source testing framework, capable of running browser tests against any website. For Selenium to run tests on your websites, it does not matter whether it is created with PHP, Ruby on Rails, NextJS or React.

Below is an example on how to run a Selenium test against a website built with React.

Copy code
const webdriver = require('selenium-webdriver');
const capabilities = {
 'platform' : 'WIN10',
 'browserName' : 'chrome',
 'version' : 'latest',
 'name': 'NodeJS Sample Test'
}
async function runTest () {
  let driver = new webdriver.Builder()
    .usingServer('https://hub.testingbot.com/wd/hub')
    .withCapabilities(capabilities)
    .build();
  await driver.get("https://react.dev/");
  try {
    await driver.wait(webdriver.until.titleMatches(/React/i), 5000);
  } catch (e) {
    console.error(e)
  }
  await driver.quit();
}
runTest();

The code example above will start a Chrome browser session on Windows 10, navigate to the React documentation website and verify if the title of the page is correct.

How TestingBot tests your React websites.

TestingBot provides a grid of highly optimised virtual machines and physical devices, capable of testing your React based website.

The advantage of using TestingBot is that you can connect your Selenium, Puppeteer, Playwright or other web automation test with an online grid of browsers, capable of running tests in parallel.

If you want to run multiple React tests simultaneously, you can use TestingBot to speed up the process.

Every test session comes with a video recording of the test session and generated logs.

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Articles

How to fix Flaky Tests

Learn about Flaky Tests: why they happen and how to fix these, with various examples.

Read more
Test Automation with ChatGPT

An introduction into generating test scripts with ChatGPT's AI language model.

Read more
Selenium and Generative AI

Generate realistic looking test data to be used with your Selenium Automated Tests.

Read more
Migrate from Appium 1.x to Appium 2.x

Learn how to migrate from Appium 1 to the new Appium 2.

Read more
Testing Tailwind CSS webpages

An introduction in running automated tests against websites built with Tailwind CSS.

Read more
Automate native iOS Apps with XCUITest

Looking to automate native iOS apps? Read our XCUITest tutorial on how to use code for iOS automation.

Read more