Outsource that data-testid!

In React Testing Library, the recommended way, after the other queries don’t work for your use-case, is to add a data-testid attribute on the element.

This works for all baked-in React HTML components, for instance on a <div/>:

import React from "react";

export default function Component() {
  return <div data-testid="some-test-id" />;
}

Spec

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import Component from "./Component";

test("it renders as expected", () => {
  const { getByTestId } = render(<Component />);

  expect(getByTestId("some-test-id")).toBeInTheDocument();
});

How to do this with custom components?

Due to the - in the name it’s not so easy and you will see other property names for it or just hard-coding the the testId into the component:

import React from "react";
import { string } from "prop-types";

export default function Component({ testId }) {
  return <div data-testid={testId} />;
}

Component.propTypes = {
  testId: string,
};

Component.defaultProps = {
  testId: undefined,
};

Spec

test("it renders as expected", () => {
  const testId = "some-test-id";

  const { getByTestId } = render(<Component testId={testId} />);

  expect(getByTestId(testId)).toBeInTheDocument();
});

Preferred approach

As i don’t like having two different conventions for specifying the data-testid attribute, i would suggest the following:

import React from "react";
import { string } from "prop-types";

export default function Component({ "data-testid": dataTestId }) {
  return <div data-testid={dataTestId} />;
}

Component.propTypes = {
  "data-testid": string,
};

Component.defaultProps = {
  "data-testid": undefined,
};

Spec

test("it renders as expected", () => {
  const testId = "some-test-id";

  const { getByTestId } = render(<Component data-testid={testId} />);

  expect(getByTestId(testId)).toBeInTheDocument();
});

Now you can use data-testid for baked-in HTML components as well as your custom components.