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>
);
}
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");
});
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();
});
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();
});
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)