自定义查询

DOM 测试库 公开了许多用于实现默认查询的辅助函数。您可以使用这些辅助函数来构建自定义查询。例如，以下代码展示了如何覆盖默认的 testId 查询以使用不同的 data-attribute。（注意：测试文件将导入 test-utils.js 而不是直接使用 DOM 测试库）。

注意
可以通过将 queries 添加到选项配置对象中，将自定义查询添加到 React 测试库 的 render 方法中。请参阅渲染选项。

自定义查询与自定义渲染方法不同。

test-utils.js
const domTestingLib = require('@testing-library/dom')
const {queryHelpers} = domTestingLib

export const queryByTestId = queryHelpers.queryByAttribute.bind(
  null,
  'data-test-id',
)
export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(
  null,
  'data-test-id',
)

export function getAllByTestId(container, id, ...rest) {
  const els = queryAllByTestId(container, id, ...rest)
  if (!els.length) {
    throw queryHelpers.getElementError(
      `Unable to find an element by: [data-test-id="${id}"]`,
      container,
    )
  }
  return els
}

export function getByTestId(container, id, ...rest) {
  // result >= 1
  const result = getAllByTestId(container, id, ...rest)
  if (result.length > 1) {
    throw queryHelpers.getElementError(
      `Found multiple elements with the [data-test-id="${id}"]`,
      container,
    )
  }
  return result[0]
}

// re-export with overrides
module.exports = {
  ...domTestingLib,
  getByTestId,
  getAllByTestId,
  queryByTestId,
  queryAllByTestId,
}

`buildQueries`

buildQueries 辅助函数允许您使用测试库中的所有标准查询创建自定义查询。

请参阅自定义渲染指南中的添加自定义查询部分，了解示例用法。

使用其他断言库

如果您没有使用 jest，您可能能够为您的选择库找到类似的一组自定义断言。以下是 jest-dom 的其他流行断言库的替代方案列表

chai-dom

如果您知道其他替代方案，请提交拉取请求并将其添加到这里！

`getNodeText`

getNodeText(node: HTMLElement)

返回 HTML 元素的完整文本内容，并删除所有多余的空白符。目的是将节点中的文本完全视为用户在浏览器中感知的方式，其中 html 代码中单词之间的任何多余空白符在渲染文本时都没有意义。

// <div>
//   Hello
//     World  !
// </div>
const text = getNodeText(container.querySelector('div')) // "Hello World !"

此函数还在通过其文本内容查询节点时在内部使用。这使 getByText 和 queryByText 等函数能够按预期工作，并在 DOM 中查找元素的方式类似于用户的操作。

该函数对某些输入元素具有特殊行为

// <input type="submit" value="Send data" />
// <input type="button" value="Push me" />
const submitText = getNodeText(container.querySelector('input[type=submit]')) // "Send data"
const buttonText = getNodeText(container.querySelector('input[type=button]')) // "Push me"

These elements use the attribute `value` and display its value to the user.

buildQueries​

使用其他断言库​

getNodeText​

`buildQueries`

使用其他断言库

`getNodeText`