Skip to content

mobile vue：单元测试指引

Jump to bottom
Y edited this page Aug 17, 2022 · 10 revisions

1 认领任务

首先在这里认领任务

2 单元测试

2.1 创建单测文件

在对应组件下新建一个 __test__/index.test.jsx 文件（avatar&avatar-group、tag&checkTag使用同一个测试文件，用 describe 区分即可）。

2.2 编写单元测试内容

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

要求：

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

describe 套件嵌套关系呈现：

截屏2022-08-16 10 54 20 
describe('fab', () => {
  describe('props', () => {
    it(': icon', () => {});

    it(': text', () => {});

    ···

  })

  describe('slots', () => {
    it(': icon', () => {});
    ···
  })

  describe('event', () => {
    it(': click', async () => {});
    ···
  })
})
  1. 每个组件测试的覆盖率要至少达到 80% 以上。（测试覆盖率包括 lines、statements、functions、branches）

相关资料

Vitest 单元测试框架：文档

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

2.3 检测测试用例

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

npm run test:unit button

2.4 查看单元测试覆盖率

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

npm run test:unit-coverage

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

截屏2022-08-14 22 27 19

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

值得一提的是，Vitest 提供了一个专门的 UI 界面来查看并与测试交互。你可以通过以下命令运行：

npm run test:unit-gui
npm run test:unit-gui button //指定组件

2.5 生成徽章

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

npm run update:coverage-badge

3 提交代码

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

tips：

  1. 如果更新了组件 demo，需要更新 snapshot 
npm run test:snap-update
  1. 如果遇到问题也可以在该 issue 中向我们寻求帮助。

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

Clone this wiki locally