How to search by data-test? (not data-testid)

Question

When I import screen object like this

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

it allows me to issue the following command: screen.findByTestId(...), but how can I search by data-test (not data-testid)? Tried to search by custom attribute, but there was no findByAttribute method in screen either.

Cabbageworm

Answer 1

Have you had a chance to see the the document? https://testing-library.com/docs/dom-testing-library/api-custom-queries/

If you want to query with your own-defined attribute, you can make one using buildQueries

// custom-queries.js

import {queryHelpers, buildQueries} from '@testing-library/react'

// query
const queryAllByData = (...args) =>
  queryHelpers.queryAllByAttribute('data-test', ...args)

const [
  queryByDataTest,
] = buildQueries(queryAllByData)

export {
  queryByDataTest
}

// test-utils.js

import {render, queries} from '@testing-library/react'
import * as customQueries from './custom-queries'

const customRender = (ui, options) =>
  render(ui, {queries: {...queries, ...customQueries}, ...options})

// re-export everything
export * from '@testing-library/react'

// override render method
export {customRender as render}

//test.spec.jsx

const {getByData} = render(<Component />)

expect(getByData('my-component')).toHaveTextContent('Hello')

You can find more in the attached document.

Sane

Answer 2

While the accepted answer works, the recommended way to update the global testIdAttribute across tests is:

...
import { configure } from '@testing-library/react';
...

configure({ testIdAttribute: 'data-test' });

This way, you can continue using screen.findByTestId(...) without defining and maintaining any custom query. You can do this per test or globally per app on your global jest config using the setupFilesAfterEnv.

An example of this would look like this:

jest.config.ts

import type { Config } from 'jest';

const config: Config = {
  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
};

export default config;

jest-setup.ts

import { configure } from '@testing-library/dom';
import '@testing-library/jest-dom';

configure({ testIdAttribute: 'data-test' });

Orthopedic

Answer 3

According to the documentation, you can use Manual Queries

First, you need to get the container where the rendering was. Then search inside of it by your attribute.

const {container} = render(<MyComponent />)
const foo = container.querySelector('[data-test="my-component"]')

But you should remember this approach contradicts the ideology of React Testing Library, which says User cannot navigate your application by attributes.

Recent

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Trail