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`运行测试。
➡️
