如何通过数据测试搜索？ （不是数据测试）

Question

当我导入这样的屏幕对象时，

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

它允许我发出以下命令：screen.findbytestid（...），但是如何通过data-Test（不是）搜索data-testid）？尝试通过自定义属性进行搜索，但是screen> screen> scoper中没有findbyattribute方法。

Answer 1

您有机会看到该文件吗？
https://testing-library.com/docs/docs/domdocs/dom dom -testing-library/api-custom-queries/

如果您想使用自己的定义属性查询，则可以使用build Querenqueries制作一个，

// 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')

您可以在附件的文档中找到更多。

Answer 2

尽管接受的答案有效，但在测试中更新全局testIdattribute的推荐方法是：

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

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

这样，您可以继续使用screen.findbytestid（...）而无需定义和维护任何自定义查询。您可以使用setupfilesafterenv在全局嘲笑上进行每个测试或全球应用程序执行此操作。

这样的例子是这样的：

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' });

Answer 3

根据文档，您可以使用手动查询

首先，您需要，您需要要获取渲染所在的容器。
然后通过您的属性搜索它。

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

但是您应该记住，这种方法与React测试库的意识形态相矛盾，该库说用户无法通过属性导航您的应用程序。