Unit Test

Posted on | In , ,

Unit Test is a level of software testing where individual units / components of a software are tested. The purpose is to validate that each unit of the software performs as designed.

Jest

Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.

React Testing Library

React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children, a test runner like Jest lets you do this by mocking.

Why Jest and React Testing Library?

Jest:

  • Very fast.
  • Interactive watch mode that only runs tests which are relevant to your changes.
  • Helpful failure messages.
  • Simple configuration, or even zero configuration.
  • Mocks and spies.
  • Coverage reports.
  • Rich matchers API.

React Testing Library:

  • Much simpler API.
  • Convenient queries (form label, image alt, ARIA role).
  • Async queries and utilities.
  • Better error messages.
  • Easier setup.
  • Recommended by React team.

Testing structure

beforeAll / afterAll

Run functions after the tests are completed in the current test file or before your test starts. You can clean up your resources and mock data created on the database by using the afterAll function, or you can set up your configurations in beforeAll.

beforeEach / afterEach

Unlike afterAll and beforeAll, these functions are called for each test case in your test file. By using beforeEach, you can create a connection to your database before each test case start to run. As a best practice, you should use afterAll to remove your created DOM elements after each test case run.

describe

This command allows you to group related tests to produce a cleaner output.

Snapshot testing

A snapshot test generates an HTML-like output so you can see how your component is structured. Avoid snapshot testing unless you’re testing very short output with clear intent, like class names or error messages, or when you really want to verify that the output is the same.

Selecting DOM elements for tests

React Testing Library has methods for all good queries.

  • getBy*() returns the first matching element and throws when an element not found or more than one element found;
  • queryBy*() returns the first matching element but doesn’t throw;
  • findBy*() returns a promise that resolves with a matching element, or rejects when an element not found after a default timeout or more than one element found;
  • getAllBy(), queryAllBy(), findAllBy*(): same as above but return all found elements, not just the first one.

And the queries are:

  • getByLabelText() finds a form element by its
  • getByPlaceholderText() finds a form element by its placeholder text;
  • getByText() finds an element by its text content;
  • getByAltText() finds an image by its alt text;
  • getByTitle() finds an element by its title attribute;
  • getByDisplayValue() finds a form element by its value;
  • getByRole() finds an element by its ARIA role;
  • getByTestId() finds an element by its test ID.

Testing event handlers

When you unit test a single component, event handlers are often defined in the parent component, and there are no visible changes as a reaction to these events. They also define the API of a component that you want to test.

jest.fn() creates a mock function, or a spy, that allows you to check how many times it was called and with which parameters.

Mocking functions

Mocking while testing is one of the core features you will need to implement. Jest is great for mocking not only your functions but also your modules. With jest.mock() you can mock any JavaScript module.

Reference

Testing Overview
Modern React testing, part 3: Jest and React Testing Library
Comparing React testing libraries