Skip to content

如何写单元测试(快速指南)

leejimqiu edited this page Aug 8, 2022 · 2 revisions

1 认领任务

首先在 这里 认领任务

2 创建单测文件

在对应组件的 __test__ 目录下,一般是创建 index.test.js 文件。

如果使用 VSCode 编辑器的话,可以使用 ttest 快捷指令快速生成模板:

也可以安装 Jest 插件,这样就可以每次保存代码都会执行测试,快速查看结果。

3 编写单元测试

由于已经给所有组件的 DEMO 都添加了 snapshot 测试,因此不需要给组件本身添加 snapshot 测试。

需要关注的是,测试的覆盖率。包括 lines、statements、functions、branches。

要求是,必须每个组件都要至少达到 80% 以上。

资料:

可以参考 checkbox 的写法。

4 检测测试

如果写的是 Button 组件的测试用例,可以这样执行 npx jest button。这样仅会执行 button 的测试用例,可以节省很多时间。

执行完,会默认生成一个可以查看结果的页面: /test/unit/coverage/index.html

点击每个具体的文件,可以看到具体哪些语句没有覆盖,比如:

image

红色部分表示没有覆盖的语句,绿色表示覆盖,绿色的文字表示执行的次数

就可以针对性的写测试用例了。

5 生成徽章

完成测试用例之后,需要通过徽章的形式,展示目前组件的测试覆盖率。

生成的脚本:

npm run badge button

以上以 Button 组件举例

6 提交代码

最后就可以提交代码了。恭喜你,成功完成一份单元测试,往更专业的前端更进一步。

如果遇到问题也可以在 issue 中向我们寻求帮助。