ByTestId

getByTestId、queryByTestId、getAllByTestId、queryAllByTestId、findByTestId、findAllByTestId

API

getByTestId(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

container.querySelector(`[data-testid="${yourId}"]`) 的快捷方式（它还接受一个 TextMatch）。

<div data-testid="custom-element" />

原生

import {screen} from '@testing-library/dom'

const element = screen.getByTestId('custom-element')

React

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

render(<MyComponent />)
const element = screen.getByTestId('custom-element')

Angular

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

await render(MyComponent)
const element = screen.getByTestId('custom-element')

Cypress

cy.findByTestId('custom-element').should('exist')

秉承着 指导原则 的精神，建议只有在其他查询不适用于你的用例时才使用它。使用 data-testid 属性不反映你的软件的使用方式，应尽可能避免。也就是说，它们比根据 DOM 结构或样式 css 类名进行查询要好得多。从博客文章 "让你的 UI 测试更能抵御变化" 中了解更多关于 data-testid 的知识。

选项

TextMatch 选项

覆盖 data-testid

DOM Testing Library 中的 ...ByTestId 函数默认使用属性 data-testid，遵循由 React Native Web 设置的先例，它使用 testID prop 在元素上发出 data-testid 属性，我们建议你在可能的情况下采用该属性。但是，如果你已经有一个使用不同属性来实现此目的的现有代码库，你可以通过 configure({testIdAttribute: 'data-my-test-attribute'}) 覆盖此值。