一、可选的测试工具

单元测试

• jasmine
• karma
• mocha
• jest

e2e测试

• nightwatch
• cypress

e2e的浏览器支持

• LambdaTest
• Selenium

二、方案

项目技术栈

• vue3
• typescript
• scss
• eslint + prettier
• jest + vue-test-utils + cypress
• webpack4 / webpack5 / rollup
• 封装element / 封装antd / 自己从0实现
• axios
• xxxxxxxxxxxxxxxx
• 离线缓存
• 性能监控

测试方案

• jest + vue-test-utils + cypress
• 组件单元测试（包括快照测试、事件测试等）
• 页面 e2e 测试
• 报告覆盖率

三、OKR

o: 构建前端自动化测试能力

• kr1: 实现一个至少拥有2级页面、2种组件的网站 demo
  • kr1.1: 搭建新项目，并编写一个网站 demo
  • kr1.2: 写各个库的配置文件，写简单的测试文件，使项目能正常开发、lint、测试、打包
• kr2: 每个组件拥有完备的单元测试
  • kr2.1: 通读 jest 文档 + vue-test-utils 文档
  • kr2.2: 学习 vue-next 项目中的单元测试，了解测试的对象、范围和粒度
  • kr2.3: 为项目demo的每个组件编写单元测试用例
• kr3: 每个页面拥有完备的 e2e 测试
  • kr3.1: 通过 cypress 文档学习其用法
  • kr3.2: 通过 nuxtjs.org 项目学习 e2e 测试的写法
  • kr2.3: 为项目demo的每个页面编写 e2e 测试用例
• kr4: 测试运行结束后正确报告结果和测试覆盖率