前端自动化测试：Vue 应用测试

项目环境搭建

运行 vue create [project-name] 来创建一个新项目。选择 "Manually selectfeatures" 和 "UnitTesting"，以及 "Jest" 作为 test runner。

一旦安装完成，cd 进入项目目录中并运行 yarn test:unit。文章源自玩技e族-https://www.playezu.com/194270.html

通过 jest 配置文件：

\jest.config.js ==> node_modules\@vue\cli-plugin-unit-jest\jest-preset.js ==> \node_modules\@vue\cli-plugin-unit-jest\presets\default\jest-preset.js文章源自玩技e族-https://www.playezu.com/194270.html

jest-preset.js 文件就是 Vue 项目创建后，默认的 jest 配置文件：文章源自玩技e族-https://www.playezu.com/194270.html

快速体验

默认测试用例：tests\unit\example.spec.js文章源自玩技e族-https://www.playezu.com/194270.html

搭建完基本的 Vue 测试环境，在正式开始 Vue 测试之前，我们先了解一下测试开发的方法。文章源自玩技e族-https://www.playezu.com/194270.html

测试开发方式

测试不仅能够验证软件功能、保证代码质量，也能够影响软件开发的模式。文章源自玩技e族-https://www.playezu.com/194270.html

测试开发有两个流派：文章源自玩技e族-https://www.playezu.com/194270.html

• TDD：测试驱动开发，先写测试后实现功能
• BDD：行为驱动开发，先实现功能后写测试

什么是TDD

TDD(Test-driven development)，就是测试驱动开发，是敏捷开发中的一项核心实践和技术，也是一种软件设计方法论。

它的原理就是在编写代码之前先编写测试用例，由测试来决定我们的代码。而且 TDD 更多地需要编写独立的测试用例，比如只测试一个组件的某个功能点，某个工具函数等。

TDD开发流程：

• 编写测试用例
• 运行测试
• 编写代码使测试通过
• 重构/优化代码
• 新增功能，重复上述步骤

单纯运行测试代码肯定报错，有了测试代码，为了通过测试，再具体写 math 模块中的 add() 方法：

Vue 3 的 TDD 测试用例

src\components\TodoHeader.vue 组件内容

测试用例：

tests\unit\example.spec.js

src\components\TodoHeader.vue 组件内容

1. exportdefault{
2. data(){
3. return{
4. inputValue:''
5. }
6. },
7. methods:{
8. handleNewTodo(){
9. if(this.inputValue.trim().length){
10. //发布对外的new-todo事件值为文本框输入内容
11. this.$emit('new-todo',this.inputValue)
12. this.inputValue=''
13. }
14. }
15. }
16. };