代码之家 › 专栏 › 技术社区 › eugenekr

如何通过数据测试进行搜索?(非数据测试)

react-testing-library

0

eugenekr · 技术社区 · 4 年前

当我像这样导入屏幕对象时

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

它允许我发出以下命令: screen.findByTestId(...) ,但我如何搜索 data-test (不是 data-testid )?尝试按自定义属性搜索,但没有 findByAttribute 中的方法 screen 任何一个

0 回复 | 直到 4 年前

1

6

JunKim 4 年前

你有机会看到这份文件吗? https://testing-library.com/docs/dom-testing-library/api-custom-queries/

如果要使用自己定义的属性进行查询,可以使用 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')

您可以在附件中找到更多信息。

2

1

Erwol 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;

笑话设置

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

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