DEV Community
·
React 基础：单元测试/UI
内容提要
文章介绍了如何使用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组件包含一个表单、标题、输入框、按钮和图片等元素。
