DEV Community
·
React 基础：单元测试/UI
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
文章介绍了如何使用Jest和React Testing Library进行单元测试。示例中，`Example`组件包含`Greet`组件，后者有表单、按钮、图片等元素。在`Greet.test.jsx`中，通过`render`渲染组件，使用`screen`的方法如`getByText()`、`getByRole()`获取元素，并用`expect`断言检查元素是否存在。测试通过`npm test`运行，显示结果。
🎯
关键要点
- 文章介绍了如何使用Jest和React Testing Library进行单元测试。
- 示例中，`Example`组件包含`Greet`组件，后者有表单、按钮、图片等元素。
- 在`Greet.test.jsx`中，通过`render`渲染组件，使用`screen`的方法获取元素。
- 使用`expect`断言检查元素是否存在。
- 测试通过`npm test`运行，显示结果。
- 测试函数的第一个参数是测试标题，第二个参数是执行测试代码的回调函数。
- 需要使用`render`函数渲染待测试的组件，并可使用`debug`和`container`。
- 可以使用`screen`的多种函数获取元素，如`getByText()`、`getByRole()`、`getByAltText()`等。
- 最后，使用`expect`检查元素是否存在于文档中。
- 测试代码编写完成后，通过命令`npm test`运行测试。
❓
延伸问答
如何使用Jest和React Testing Library进行单元测试？
使用Jest和React Testing Library进行单元测试时，首先需要渲染待测试的组件，然后使用screen的方法获取元素，最后用expect断言检查元素是否存在。
在测试中如何获取元素？
可以使用screen的多种函数获取元素，如getByText()、getByRole()、getByAltText()等。
如何运行测试代码？
测试代码编写完成后，通过命令npm test运行测试。
测试函数的参数是什么？
测试函数的第一个参数是测试标题，第二个参数是执行测试代码的回调函数。
如何检查元素是否存在于文档中？
使用expect方法检查元素是否存在，语法为expect(元素).toBeInTheDocument()。
Greet组件包含哪些元素？
Greet组件包含一个表单、标题、输入框、按钮和图片等元素。
➡️
