Unit testing in React

In case it helped :)

We will cover briefly:

1. Write unit tests for components
2. Snapshot Testing with Jest

About Unit Testing

Unit testing is a testing method that tests an individual software unit in isolation. This involves verifying the output of a function or component for a given input.

In terms of React components, this means checking that the component

• renders as expected for the specified props.

The main goal is to write tests that verify whether our component works as expected.

Intro to Jest

We will make use of jest in order to test our react components. As per the documentation

Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly.

Let's see how to install it

• Install the following dev dependencies

npm i --save-dev @testing-library/react react-test-renderer

Note: Make sure your react and react-test-renderer are using the same version

Write unit tests for components

We will start by creating a simple text component, which looks like this

Simple Text Component

It takes in a parameter text and displays using the h3 style tag onto the screen. 

Take note of the data-testid. This will be used for testing this component

Let’s test this component now,

• We create a folder called __tests__ which is present inside the components folder. Inside this, we create component-specific folders

Folder structure

We have all the components under components and all the tests under __tests__ This way we can create subfolders per component.

eg: For components/Text we have the corresponding test under components/__tests__/Text folder

• All the tests should be comprised of the convention <TestName>.test.js This helps jest to understand the test files

So our test file would be Text.test.js 

• Next, we import the package testing-library/react along with the jest as

import { render, screen, cleanup } from "@testing-library/react";
import Text from "../../Text/Text";
import "@testing-library/jest-dom";

Note: we also need to import the component which we want to test. In our case, it's the Text

• This is how our test looks like

test("should render text component", () => {
  render(<Text />);
  var textElem = screen.getByTestId("text");
  expect(textElem).toBeInTheDocument();
});

test: This creates a test closure, and takes in the param name (name of your test) and param fn (function for your test)

render: This comes from the testing-library/reactIt renders into a container that is appended to the document body. 

In our case, we render the Text component

screen: This can be thought of as a document.body, which has every query that is bounded to the component you rendered in the previous call

We assigned a data-testid to our Text component, and we try to get that using getByTestId

Finally, we use expect and toBeInTheDocument to test that the element is present inside the rendered document. 

The jest-dom utility library provides the .toBeInTheDocument() matcher, which can be used to assert that an element is in the body of the document, or not.

• Run the tests using

npm test

Results from the unit test

And, we wrote our first test 🎉🎉🎉

Snapshot Testing with Jest

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.

Any snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated as per the new version of the UI component.

Let’s test our Text component.

Snapshot testing with Jest

• We will be making use of our react-test-renderer library which we installed in the previous step.

Instead of rendering the graphical UI, which would require building the entire app, we can use a test renderer to quickly generate a serializable value for your React tree.

• We use renderer to create the Text component
• Next, we save the response in the JSON using toJSON 
• Finally, we use the expect to compare the result using toMatchSnapshot which ensures that the value matches the most recent snapshot.
• Run the tests using

npm test

Snapshot testing in React

Note: There will be no snapshots present when you run the snapshot tests for the first time. The console will tell to generate the snapshots 

• The snapshots are generated inside the __snapshots__ folder as 

Snapshots generated

In case it helped :)

Source code.

Website: https://funwithreact.web.app/