NPM 包 dom-testing-library 使用教程

dom-testing-library 是一个测试 JavaScript 应用程序中 DOM 节点的工具库。它旨在使测试更像用户在与应用程序交互时所做的操作，而不是针对实现细节进行测试。

安装和使用

你可以通过 npm 进行安装：

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

然后在你编写的测试文件中导入它：

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

基本 API

dom-testing-library 的核心 API 包括以下方法:

• getByLabelText()
• getByPlaceholderText()
• getByText()
• getByDisplayValue()
• getByAltText()
• getByTitle()
• getByRole()
• getByTestId()
• queryBy...() 方法类似于 getBy...()，但如果找不到元素，则会返回 null。
• getAllBy...() 和 queryAllBy...() 方法与上面的方法相似，但它们返回所有匹配的元素数组而不是单个元素或 null。

这些方法采用一个参数，该参数是要查找的元素的描述，例如文本、占位符文本、标签等。

以下是一些示例：

// 获取页面上第一个 input 标签
const input = screen.getByRole('textbox')

// 获取页面上第一个带有指定文本的按钮
const button = screen.getByText('Submit')

// 获取页面上所有的 span 元素
const spans = screen.getAllByRole('span')

与 Jest 的集成

dom-testing-library 可以轻松地与 Jest 集成。你可以使用 fireEvent 函数模拟用户事件，例如单击、更改和输入：

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

test('should call onClick handler', () => {
  const onClick = jest.fn()
  render(<button onClick={onClick}>Click me</button>)
  fireEvent.click(screen.getByText('Click me'))
  expect(onClick).toHaveBeenCalled()
})

结论

dom-testing-library 是一个很好的工具，它使测试代码更接近于实际应用程序的交互，而不是针对实现细节进行测试。在编写前端应用程序时，始终记得添加测试以确保你的代码质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46234