简介
@umijs/test 是一个基于 Jest 的 UI 测试工具，用于测试 React 组件的可用性和正确性。它提供了一套完整的测试框架，可以方便地编写测试用例，并且支持多种测试方式。
安装
可以通过命令行来安装 @umijs/test：
npm install @umijs/test --save-dev
使用
编写测试用例
@umijs/test 提供了一套完整的测试框架，包括测试用例的编写。测试用例应该放在名为 __tests__ 的目录下，并且文件名以 .test.js 结尾，例如：
-- -------------------- ---- -------
-- ------------------------
------ ----- ---- --------
------ - ------- ------- - ---- -------------------------
------ ------ ---- ----------------
-------------------
------------------ -- -- -
----------- ----------- -- -- -
----- - --------- - - -------------------- -------------
----------------------- --------------------------
---
---这个测试用例使用了 Jest 的 API，首先渲染了一个 Button 组件，然后找到其中的文本，判断是否包含了 Click me。
运行测试用例
运行测试用例需要使用 Jest 的 CLI 工具。可以在 package.json 中添加一个脚本命令：
{
"scripts": {
"test": "jest"
}
}然后运行：
npm test
就可以运行测试用例了。
使用浏览器打开测试结果
@umijs/test 还提供了一个类 React 渲染器，可以将测试结果生成一个 HTML 文件，然后用浏览器打开。
在测试用例中添加以下代码即可：
-- -------------------- ---- -------
------ - -------------------- - ---- -------------------
------ - ------ - ---- --------------
----------- ------ ----------- -- -- -
----- ------- - -
-
------ ------- ------- -----------
----- -----
-
--
----- ------ - ---------------------------- ----------------- ----
-- - ---- ---- ---- ---
------------------------------------ --------
---然后运行测试用例，会在 dist 目录下生成一个名为 result.html 的文件，用浏览器打开即可。
使用 CLI 工具生成测试报告
@umijs/test 还提供了一个 CLI 工具，可以生成测试报告，支持多种格式（HTML、JSON、JUnit 等）。
在命令行中运行：
npx umi-test report
就可以在当前目录下生成一个名为 test-report.html 的 HTML 报告。
结语
@umijs/test 是一个非常棒的测试工具，可以方便地编写测试用例，查看测试结果，并生成报告。对于前端开发者而言，学习和使用这样的测试工具是非常有必要的，它可以帮助我们保证代码的可用性和正确性，提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3dd21adbf7be33b2567124