Feb 18 2024
Have you ever written similar assertions?
const { getByRole } = render(<Input />);
expect(getByRole("button")).toBeInTheDocument();
const { getByText } = render(<Button />);
expect(getByText("Send this message")).toBeInTheDocument();
const { getByLabelText } = render(<Label />);
expect(getByLabelText("Name")).toBeInTheDocument();
const { container } = render(<Sidebar />);
expect(
container.getElementsByClassName("wrapper-secondary"),
).toBeInTheDocument();
If you have, you might have noticed that these tests are sensitive to change.
button
to submit
, the test will fail.Send this message
to Send
, the test will fail.Name
to Full name
, the test will fail.wrapper-secondary
, the test will also fail.data-testid
and how to use it?data-testid
is an attribute that is used to select elements in the DOM. It is not a standard HTML attribute, but it is widely used in the testing community.
Here is an example of how you can use data-testid
in jsx components:
<Button data-testid="button" />
<Input data-testid="input" />
<Label data-testid="label" />
<Sidebar data-testid="sidebar" />
and in the tests you can use it like this to select elements:
const { getByTestId } = render(<Button />);
expect(getByTestId("button")).toBeInTheDocument();
const { getByTestId } = render(<Input />);
expect(getByTestId("input")).toBeInTheDocument();
const { getByTestId } = render(<Label />);
expect(getByTestId("label")).toBeInTheDocument();
const { getByTestId } = render(<Sidebar />);
expect(getByTestId("sidebar")).toBeInTheDocument();
data-testid
for grabbing elements in the tests?Send this message
to Send
, you don’t have to change the test.data-testid
attribute.data-testid
for grabbing elements in the tests?There is an argument that:
Using data-testid attributes do not resemble how your software is used and should be avoided if possible.
But I don’t really buy this argument. I think that the benefits of using data-testid
outweigh this minor drawback.
You can use data-testid
in combination with other selectors. For example:
<Button data-testid="button" aria-label="Send this message" />
const { getByTestId, getByLabelText } = render(<Button />);
const button = getByTestId("button");
expect(button).toBeInTheDocument();
expect(button).toHaveAttribute("aria-label", "Send this message");
That’s all. I hope you enjoyed this article. If you have any questions, feel free to ask them in the comments.
Here’s an addon for you. Brief summary of an article. You can use it to create fiches cards (e.g. in Anki).
data-testid
and how to use it?data-testid
is an attribute that is used to select elements in the DOM. It is not a standard HTML attribute, but it is widely used in the testing community.
Example of how you can use data-testid
in jsx components:
<Button data-testid="button" />
const { getByTestId } = render(<Button />);
expect(getByTestId("button")).toBeInTheDocument();