"@testing-library/jest-dom" - 介绍

简介

"@testing-library/jest-dom" 是一个 Jest 插件，它提供了一组符合 DOM 统一测试的匹配器（matchers）。这些匹配器能够让你写出更加易读和简洁的测试代码。

这个库基于 Jest 和 DOM Testing Library。如果你已经熟悉了这两个库的使用，那么使用 "@testing-library/jest-dom" 应该会非常容易上手。

安装

你可以使用 npm 来安装 "@testing-library/jest-dom"：

npm install --save-dev @testing-library/jest-dom

或者使用 yarn：

yarn add --dev @testing-library/jest-dom

使用

使用 "@testing-library/jest-dom" 更改测试代码主要是基于使用它提供的一些 DOM 匹配器。

下面是一个例子：

test('button click changes text', () => {
  const { getByText, getByRole } = render(
    <Counter />
  )

  const button = getByRole('button')
  const text = getByText('You have clicked 0 times')

  fireEvent.click(button)

  expect(text).toHaveTextContent('You have clicked 1 times')
})

在该例子中，我们使用了 toHaveTextContent 匹配器，它可以检查元素是否是否拥有指定文本内容。

匹配器列表

"@testing-library/jest-dom" 提供了许多 DOM 统一测试的匹配器。下面是一个简单的列表：

• toBeInTheDocument
• toBeDisabled
• toBeEnabled
• toBeEmptyDOMElement
• toBeDefined
• toBeInTheDocument
• toBeInvalid
• toBeRequired
• toBeValid
• toBeVisible
• toContainElement
• toContainHTML
• toHaveAttribute
• toHaveClass
• toHaveFocus
• toHaveFormValues
• toHaveStyle
• toHaveTextContent
• toHaveValue
• toBeChecked
• toBePartiallyChecked
• toHaveDescription

具体用法请参考官方文档：https://github.com/testing-library/jest-dom#readme