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" />

Native

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

Cypress

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

依据 指导原则，只有其它查询方式都不适用于你的测试用 例时才推荐使用它。使用 data-testid 属性来查询与你的软使用方式不同，所以需要尽 量避免使用。即便如此， data-testid 还是比基于 DOM 结构 或 css 样式的 class 来 查询好得多。想要了解更多关于 data-testid，请参考博客 "Making your UI tests resilient to change"

选项

TextMatch 选项

覆盖 data-testid

DOM Testing Library 提供的 ...ByTestId 函数默认使用 data-testid 属性, 我们 也推荐你尽可能使用该属性。但是如果你的现有代码库已经使用了一个不同属性值来实现测 试目的，你可以通过 configure({testIdAttribute: 'data-my-test-attribute'}) 来覆 盖这个值。