- Mar 10
- 3 min read

React Testing - I [Intro - JEST-RTL with CRA ]

We do tests to deliver a confident product to the client. If you are a developer, you must have a basic understanding of testing.

If you create a react application using - create-react-app, you will have React-Testing-Library(RTL) and Jest installed.

What is the difference between RTL and Jest?

Jest is a javascript test framework.

Jest is a test runner and outputs the test results in human-readable form.

It looks for test files and runs test cases on them.

RTL is a utility that provides virtual DOM for testing react components.

We can interact with this virtual DOM and verify the behavior of react component.

In an oversimplified manner,

Jest --> looks for test files and outputs test results in a human-readable manner.

RTL --> React-specific utility and provides virtual DOM for testing react component. V-DOM can be interacted with and verified with user behavior.

Let's hit the code; sorry, test!

If you created using CRA, then Jest and RTL have already been installed.

Inside package.json, you will have RTL as

"@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0",

and Jest will be inside node modules of

"react-scripts": "5.0.1",

If you give the npm test, the "App.test.js" file will run and gives you the output.If you get any error like watch-typehead, then install this

npm i -D --exact jest-watch-typeahead@0.6.5

Then rerun the test,

It will give you options like this,

Press 'a' to run all tests.

Now App.test.js is run, and the result is given in human-readable format.

This is done by Jest because we run through react scripts test.

"react scripts" contains Jest.

Let's look inside "App.test.js"

When you need to run the test, you need a test method.

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

test method takes in ("test name" , callback fn, timeout(optional args))

The above test name is 'renders learn react link'

The call back will have expectations of tests.

No timeout, and hence default is 5 seconds.

The second parameter (i.e., callback fn) is where RTL comes into the picture.

We create virtual DOM using the render method of RTL (@testing-library/react).
We render the <App /> component to the virtual DOM by passing the App component as an argument to the render method.
Now that we have created vdom and rendered the App component, we will have to use queries to access the vdom. This is facilitated by the screen method from RTL.
At last, we write expectations in the final line by expect method.

Now you may ask, why test and expect methods are not imported? It is provided by Jest while running tests. That's the leverage of CRA.