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

## Mock functions
As you probably remember from earlier, you can create a mock function like this:
```javascript
const mockFn = jest.fn();
```
You can specify its return values like:
```javascript
mockFn.mockReturnValueOnce(42);
```
This line will make `mockFn` return `42` when called. However, it will only work once. To make it return `42` always, write:
```javascript
mockFn.mockReturnValue(42);
```
If the scenario is more complicated, you may want to return different values on every function invocation. To do this, you can chain `mockReturnValueOnce` calls:
```javascript
mockFn
  .mockReturnValueOnce(1)
  .mockReturnValueOnce('two')
  .mockReturnValueOnce(3);

console.log(mockFn()); // 1
console.log(mockFn()); // 'two'
console.log(mockFn()); // 3
```

Sometimes, you want to mock the whole implementation of the function and not just the return value. You can use the `mockImplementation`/`mockImplementationOnce` functions for that:
```javascript
const mockFn = jest.fn();
mockFn.mockImplementationOnce(() => console.log('it works'));

mockFn();
// it works
```

`mockImplementation` is also used to throw exceptions from mock functions:
```javascript
const thisShouldThrow = jest.fn();
thisShouldThrow.mockImplementation(() => {
  throw new Error('it works');
});
thisShouldThrow();
// Uncaught Error: it works
```

## Verifying mock functions
Mock functions would not be particularly useful if there was no way of validating the interactions on them. You should already know some of the functions like `expect(fn).toHaveBeenCalled` and `expect(fn).toHaveBeenCalledWith`. Here are some more functions that you will find useful:
- `expect(fn).toHaveBeenLastCalledWith(args)`: Verify that the __last__ call was made with specified arguments.
- `expect(fn).toHaveBeenCalledTimes(n)`: Verify that `fn` was called exactly `n` times.
- `expect(fn).toHaveBeenNthCalledWith(n, args)`: Verify that `fn` was called with specified arguments on exactly the `n`$^{th}$ call.

If these assertions are not enough for your tests, you can access the calls directly. Every mock function will have the `mock` property. In turn, it has the `calls` property. `calls` is an array of arrays:
```javascript
const mockFn = jest.fn();
mockFn(5);
mockFn('Toyobara', 'BRZ');

console.log(mockFn.mock.calls.length); // 2
console.log(mockFn.mock.calls[0][0]); // 5
console.log(mockFn.mock.calls[1]); // ['Toyobara', 'BRZ']
```
Using these objects, you can test for __any__ interaction possible.

## Quick recap
In this lesson, we learned some advanced functions to work with mocks. You should now know how to specify the return values of mock functions and their side effects as well as how to assert on their calls and arguments. We used the following functions from Jest:
- `jest.fn()` to create mock functions.
- `fn.mockReturnValue`/`fn.mockReturnValueOnce` to specify return values for mocks.
- `fn.mockImplementation`/`fn.mockImplementationOnce` to specify implementation or throw errors from mocks.
- `expect(fn).toHaveBeenCalled`/`expect(fn).toHaveBeenCalledWith(args)` to assert on any calls.
- `expect(fn).toHaveBeenLastCalledWith(args)` to assert on __last__ call.
- `expect(fn).toHaveBeenNthCalledWith(n, args)` to assert on __`n`th__ call.
- `fn.mock.calls` to assert on anything else.

# Mock functions
As you probably remember from earlier, you can create a mock function like this:
```javascript
const mockFn = jest.fn();
```
You can specify its return values like:
```javascript
mockFn.mockReturnValueOnce(42);
```
This line will make `mockFn` return `42` when called. However, it will only work once. To make it return `42` always, write:
```javascript
mockFn.mockReturnValue(42);
```
If the scenario is more complicated, you may want to return different values on every function invocation. To do this, you can chain `mockReturnValueOnce` calls:
```javascript
mockFn
  .mockReturnValueOnce(1)
  .mockReturnValueOnce('two')
  .mockReturnValueOnce(3);

console.log(mockFn()); // 1
console.log(mockFn()); // 'two'
console.log(mockFn()); // 3
```

Sometimes, you want to mock the whole implementation of the function and not just the return value. You can use the `mockImplementation`/`mockImplementationOnce` functions for that:
```javascript
const mockFn = jest.fn();
mockFn.mockImplementationOnce(() => console.log('it works'));

mockFn();
// it works
```

`mockImplementation` is also used to throw exceptions from mock functions:
```javascript
const thisShouldThrow = jest.fn();
thisShouldThrow.mockImplementation(() => {
  throw new Error('it works');
});
thisShouldThrow();
// Uncaught Error: it works
```

# Verifying mock functions
Mock functions would not be particularly useful if there was no way of validating the interactions on them. You should already know some of the functions like `expect(fn).toHaveBeenCalled` and `expect(fn).toHaveBeenCalledWith`. Here are some more functions that you will find useful:
- `expect(fn).toHaveBeenLastCalledWith(args)`: Verify that the __last__ call was made with specified arguments.
- `expect(fn).toHaveBeenCalledTimes(n)`: Verify that `fn` was called exactly `n` times.
- `expect(fn).toHaveBeenNthCalledWith(n, args)`: Verify that `fn` was called with specified arguments on exactly the `n`$^{th}$ call.

If these assertions are not enough for your tests, you can access the calls directly. Every mock function will have the `mock` property. In turn, it has the `calls` property. `calls` is an array of arrays:
```javascript
const mockFn = jest.fn();
mockFn(5);
mockFn('Toyobara', 'BRZ');

console.log(mockFn.mock.calls.length); // 2
console.log(mockFn.mock.calls[0][0]); // 5
console.log(mockFn.mock.calls[1]); // ['Toyobara', 'BRZ']
```
Using these objects, you can test for __any__ interaction possible.

# Quick recap
In this lesson, we learned some advanced functions to work with mocks. You should now know how to specify the return values of mock functions and their side effects as well as how to assert on their calls and arguments. We used the following functions from Jest:
- `jest.fn()` to create mock functions.
- `fn.mockReturnValue`/`fn.mockReturnValueOnce` to specify return values for mocks.
- `fn.mockImplementation`/`fn.mockImplementationOnce` to specify implementation or throw errors from mocks.
- `expect(fn).toHaveBeenCalled`/`expect(fn).toHaveBeenCalledWith(args)` to assert on any calls.
- `expect(fn).toHaveBeenLastCalledWith(args)` to assert on __last__ call.
- `expect(fn).toHaveBeenNthCalledWith(n, args)` to assert on __`n`th__ call.
- `fn.mock.calls` to assert on anything else.

Learn to create mock functions and objects. You will also learn to specify their side effects and return values.

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

Creating Mock Objects

Mock functions