mobile vue：单元测试指引

1 认领任务

首先在这里认领任务

2 单元测试

2.1 创建单测文件

在对应组件下新建 __test__/index.test.jsx 文件。

2.2 编写单元测试内容

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

要求：

每一个组件都需要测试四块内容： props、events、slots、functions。

每个组件测试的覆盖率要至少达到 80% 以上。（测试覆盖率包括 lines、statements、functions、branches）

相关资料

Vitest 单元测试框架：文档

如果使用 VSCode 编辑器的话，可以使用 vtest 快捷指令快速生成模板：

2.3 检测测试用例

如果写的是 Button 组件的测试用例，可通过命令行，单独执行 Button 组件的测试用例，减少运行时间，如下所示。

npm run test:unit button

2.4 查看单元测试覆盖率

确认测试用例通过后，可通过命令行，查看测试覆盖率。

npm run test:unit-coverage

执行完，会默认生成一个可以查看结果的页面： /test/unit/coverage/index.html。 点击每个具体的文件，可以看到具体哪些语句没有覆盖，就可以针对性的写测试用例了。 比如：

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

2.5 生成徽章

完成测试用例之后，需要通过徽章的形式，展示目前组件的测试覆盖率，使用一下子命令，更新测试覆盖率

npm run update:coverage-badge

3 提交代码

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

tips：

1. 如果更新了组件 demo，需要更新 snapshot

npm run test:snap-update

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

【不推荐】自动化生成组件的 props 测试用例，请通过api工具，执行 npm run api:docs Button 'Vue(Mobile)' isUseUnitTest。 (以 Button 为例)