React Testing Library: Assertions

So we've talked about queries and interactions. There are a couple more parts to creating unit tests in React, particularly assertions and mock functions. For now, let's explore assertions.

An assertion is an expression that tests if a condition is true.

If not, a bug probably exists somewhere.

The libraries commonly used for assertions in React are Jest and jest-dom. These two libraries are used in combination with React Testing Library to create unit tests. While Jest gives us a set of generic assertions, jest-dom let's us write tests that check conditions relating to the DOM. Let's look at some examples for each library.

Here are some examples of Jest. Note that each assertion is independent of the DOM. Still, they will be useful in writing tests in React.

import { render, screen } from "@testing-library/react";

const App = () => <h1>Hello world</h1>;

test("examples of Jest assertions", () => {
  render(<App />);

  // checks for deep equality
  const person1 = { name: "Neil Gebhard" };
  const person2 = { name: "Neil Gebhard" };
  expect(person1).toEqual(person2);

  // checks for strict equality
  expect(true).toBe(true);
  expect(2 + 2).toBe(4);

  // checks if opposite is true
  expect(false).not.toBe(true);

  // checks for truthy value
  expect(1).toBeTruthy();

  // checks for falsy value
  expect(undefined).toBeFalsy();

  // checks if null
  const textContent = screen.queryByText(/Hi world/);
  expect(textContent).toBeNull();

  // checks if function was called
  const drink = jest.fn();
  drink();
  expect(drink).toBeCalled();

  // checks if list has 2 items
  expect(["item 1", "item 2"]).toHaveLength(2);
});

Now let's look at some examples of jest-dom. Not how the assertions are checking various conditions about the DOM.

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

const Button = () => {
  return (
    <button className="btn" style={{ backgroundColor: 'blue' }} type="submit">
      A Button
    </button>
  )
}

test('examples of jest-dom assertions', () => {
  render(<Button />)

  // checks if in document
  const button = screen.getByRole('button', { name: /A Button/ })
  expect(button).toBeInTheDocument()

  // checks if not in document
  const textContent = screen.queryByText(/hello world/i)
  expect(textContent).not.toBeInTheDocument()

  // checks for certain CSS properties
  expect(button).toHaveStyle({ backgroundColor: 'blue' })

  // checks for certain text content
  expect(button).toHaveTextContent('A Button')

  // checks if enabled
  expect(button).toBeEnabled()

  // checks if not disabled
  expect(button).not.toBeDisabled()

  // checks if has certain attribute
  expect(button).toHaveAttribute('type', 'submit')

  // checks if has certain class
  expect(button).toHaveClass('btn')
})

There are many more assertions that were not mentioned in the examples. You should definitely check out the documentation to get the exhaustive list of assertions by visiting the webpages for Jest and jest-dom

Both Jest and jest-dom will be used together with React Testing Library to write unit tests in React. Together, they will give us all the assertions we need to ensure conditions are met and our application is working as expected.

Happy testing!