DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Tim Kamanin πŸš€
Tim Kamanin πŸš€

Posted on • Originally published at timonweb.com

How to test if element exists/doesn't exist with Jest and react-testing-library

At first, let's create a simple avatar component:

function Avatar({ username, src, usernameIsHidden = false }) {
  return (
    <div>
      <img src={src} />
      {!usernameIsHidden && <h4 data-testid="username">{username}</h4>}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

The usernameIsHidden flag allows us to toggle visibility of a username.

We'll test username element for existence and non-existence.

1. Here's how to test if the element exists and its content matches our expectation:

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

test("username exists", () => {
  const { getByTestId } = render(
    <Avatar username="Timonweb" src="https://example.com/avatar.jpg" />
  );
  expect(getByTestId(/username/i).textContent).toBe("Timonweb");
});
Enter fullscreen mode Exit fullscreen mode

2. We can also test if the element exists at all:

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

test("username exists", () => {
  const { queryByTestId } = render(
    <Avatar username="Timonweb" src="https://example.com/avatar.jpg" />
  );
  expect(queryByTestId(/username/i)).toBeTruthy();
});
Enter fullscreen mode Exit fullscreen mode

3. Finally, this is how to test for the non-existence of the element:

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

test("username doesn't exist", () => {
  const { queryByTestId } = render(
    <Avatar
      username="Timonweb"
      src="https://example.com/avatar.jpg"
      usernameIsHidden
    />
  );
  expect(queryByTestId(/username/i)).toBeNull();
});
Enter fullscreen mode Exit fullscreen mode

In cases 2 and 3, we use queryByTestId instead of getByTestId. queryByTestId doesn't fail when the queried element doesn't exist, instead, it returns either a value or null and that's what we test with expect().toBeTruthy() and expect().toBeNull().

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.