Hello,
I'm back after a long time with another article. I had lot of interviews lined up as I was looking for switching job. Finally, accepted a position as Associate 2 at Pricewaterhouse Coopers.
So as one of the first tasks, I was asked to setup testing for react app that we were building using Jest and React Testing Library. I ran into multiple issues with the setup and could not find quick fixes for my problems. Just documenting what I did so that others don't feel or get stuck.
Key Points to be noted
- This solution is for projects being bundled with webpack
- This article is not for people who are bootstrapping the React App with
create-react-app (hereby referred in the article as CRA). CRA comes preconfigured with jest and react-testing-library.
- There are few things in this article which even I don't understand like creating stubs and various parameters in
jest.config.js file
- You have a basic knowledge of what packages like babel & webpack do
- You have a react project created using webpack. If not start by cloning using below command
git clone -b 01-starter https:
Getting started
As is the way with CRA template, most of the react app testing has been moved away from the combo of Jest and Enzyme to Jest and React Testing Library. Most of this due to the fact that enzyme does not support most of the new features of react and the delay in getting apapted to new features.
For someone coming from a Enzyme testing background, there is a complete shift in the testing point-of-view. We test the component for the way it works in React-Testing Library.
Installation
Jest is a javascript testing framework. It acts as a test runner and provides us methods to interact and assert if the expected results are correct or false.
npm install
Let's check if it works by running the tests specified in the Jest Docs
function Sum(a, b) {
return a + b;
}
export default Sum;
import Sum from './Sum';
test('2 and 2 is 4', () => {
expect(Sum(2, 2)).toBe(4);
});
Add the below settings to package.json
"scripts": {
...,
"test": "jest",
},
Now run npm run test.
This test should work as expected. Lets install the other part of testing suite react-testing-library and start writing tests for our React components.
npm install @testing-library/react @testing-library/jest-dom @testing-library/user-event
Configuration
Before we test React components we need to configure jest and react-testing-library.
Run the command:
npx jest
You will be taken through a series of questions in the command line, answer them as per the applicability. For our instance the response is as below in the screenshot. After this is done, a jest.config.js file is created which has various parameters that are result of your choices.
The Problem
Create a new test file app.test.js and the below contents
import { render, screen } from '@testing-library/react';
import App from './app';
it('should render the app component', () => {
render(<App />);
const text = screen.getByText(/React starter/i);
expect(text).toBeInTheDocument();
});
Now we see an error with error message on the as below
This is because jest cannot parse non Javascript files using babel loader. Files such as images, fonts, css files etc. need to be stubbed as per the jest documentation. We need to use the property called moduleNameMapper to stub these files.
Solution
Create a folder named Mocks and create two files fileMock.js and styleMock.js
Add the below content to respective files
module.exports = "test-file-stub";
module.exports = {}
Now to the jest.config.js add the below content
module.exports = {
...,
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/Mocks/fileMock.js",
"\\.(css)$": "<rootDir>/Mocks/styleMock.js",
},
};
There is a new error now which is as below
Create a new file setupTests.js and add the following content
import '@testing-library/jest-dom/extend-expect`
and add the below to jest.config.js
module.exports = {
...,
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
}
What this does it it calls the setupTests.js file before jest runs every .test file. Now the tests would run and pass.
Complete soultion is in this Git repo
Thats all for this article. Thanks for reading it through.
