top of page

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);

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.

We write a new component and test it

Let's change the letter case in Firsttest div to 'hello'.

So we will make the test irrespective of the letter case.

We can pass regex inside getByText.

What is Test Driven Development (TDD)?

First, we write tests and then code accordingly.

  • We write tests that verify certain functionality.

  • Then we code to pass the test.

  • Then we refactor the code for optimization without failing the test.

I wrote "Tdd.test.js" first and then coded "Tdd.js" to confirm that.

Jest, by default, runs in watch mode!

So what is watch mode? It will only run test files changed from the last commit to git.

Note: Above "Firsttest.test.js" is not run above because I have committed the changes to git.

Filtering Tests

Let's make a filter in the filename regex pattern.

Press 'p'

Start typing a file name, it will filter your result.

We can also skip and run specific(only) tests in test files.


Grouping Tests

We can group tests using the 'describe' method.

The 'describe' method takes in a group name and function.

So, describe('group name',() => { })

We can nest the 'describe' method and have multiple 'describe' within the same test file.

File naming convention CRA follows,

CRA looks for(basically JEST configured) '.test.js' or '.spec.js' or files with '.js' inside '__tests__' folders.

In __tests__ folder,


bottom of page