Gain insights into testing React apps effectively. Learn about unit tests with Jest and automated integration tests using Selenium to ensure robust, customer-ready software.

Complete Guide to Testing React Apps with Jest and Selenium.jpg

jest.tar.gz

start_and_test

test

This course will teach you to properly test your React applications, starting from basic unit tests with Jest to automated integration tests using Selenium. You will learn everything from the ground up to the most advanced concepts that will give you confidence in shipping your software to customers.

Complete Guide to Testing React Apps with Jest and Selenium

# What is a matcher?
A matcher (or an assertion) is a function that is used to check for a specific condition. Most often, it compares two values. Here are some of the basic matches available in Jest:

expect(1).toBe(1); // Checking for value and reference equality
expect({a: 'b'}).toEqual({a: 'b'}); //Checking for deep value equality
expect('abacaba').toMatch(/bac/); // Checking if a string matches a regexp
expect({a: 'b', b: 'c'}).toMatchObject({a: 'b'}); // Checking for a partial object match
expect([1, 2, 3]).toContainEqual(2); // Checking if an array contains an element
expect(2).not.toEqual(3); // using not to negate any matcher
expect({a: 'b'}).toMatchObject({
  a: expect.any(String)
}); // Type checking

const mockFunction = jest.fn(); // Creating a mock function
expect(mockFunction).toHaveBeenCalled(); // Checking if it was called
expect(mockFunction).toHaveBeenCalledWith('abacaba'); // Checking for arguments

# Why do we need custom matchers?
While Jest is very powerful out-of-box, there is always something specific to the project that you can add. It should improve readability and reduce the amount of code by creating a custom Jest matcher for a common use case.

In one of my projects, I had to test whether a certain value was a correctly formatted ISO date. It can be done with a regular expression, but I had to test it so many times, it was worth moving this logic to a custom Jest matcher.

# Add a setup file
Before we add the matcher itself, it is important to add a setup file for Jest. A setup file is a file that is used to set up the environment and do things like add custom matchers, enable mocks, and configure jest. Create a file called `setupJest.js` in the project root. This will be our setup file. Now you need to add this line to your Jest config (in `package.json` or `jest.config.js`):
```
"setupFilesAfterEnv": ["./setupJest.js"]
```
> Note that for projects created with CRA (including our course project), this file is provided (in `src/setupTests.js`), but the step above is not required. If you wanted to write custom matchers for the Selenium instance of Jest, you would create a new `setupJest.js` file, and add the line above to `jest.config.js` that we created specifically for Selenium.

# Write a custom Jest matcher
In this example, I am going to write a matcher that will check if a string is a correctly formatted ISO date. This is done using the `expect.extend` function. It accepts an object whose keys are matcher names, and values are functions that perform the actual matching. Here is the code that goes into `setupJest.js`:


Learn what a matcher is, why we need them, and how to develop your own.

Introduction

Introductory Quiz

Write Your First Tests

Basic Testing Exercises

More Tests

Mocking Modules in Unit Tests

Mocking Exercises

More on Integration Tests

Bonus: Custom Matchers

Custom Matchers for Jest

What is a matcher?

Why do we need custom matchers?