Vue前端自动化测试（vue.js应用测试）

项目环境搭建

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

一旦安装完成，cd 进入项目目录中并运行 yarn test:unit。

通过 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

jest-preset.js 文件就是 Vue 项目创建后，默认的 jest 配置文件：

1. module.exports={
2. //可加载模块的后缀名
3. moduleFileExtensions:[
4. 'js',
5. 'jsx',
6. 'json',
7. //tellJesttohandle*.vuefiles
8. 'vue'
9. ],
10. //转换方式
11. transform:{
12. //process*.vuefileswithvue-jest
13. //如果.vue结尾的，使用vue-jest进行转换
14. '^.+\\.vue$':require.resolve('vue-jest'),
15. '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
16. require.resolve('jest-transform-stub'),
17. '^.+\\.jsx?$':require.resolve('babel-jest')
18. },
19. //转换时忽略文件夹
20. transformIgnorePatterns:['/node_modules/'],
21. //supportthesame@->srcaliasmappinginsourcecode
22. //webpack的别名映射转换
23. moduleNameMapper:{
24. '^@/(.*)$':'<rootDir>/src/$1'
25. },
26. //指定测试环境为jsdom
27. testEnvironment:'jest-environment-jsdom-fifteen',
29. //serializerforsnapshots
30. //快照序列化器
31. //使用jest-serializer-vue进行组件快照的序列化方式
32. //就是将组件转为字符串,后面进行快照测试时,就可以看到了
33. snapshotSerializers:[
34. 'jest-serializer-vue'
35. ],
37. //测试代码文件在哪里
38. testMatch:[
39. '**/tests/unit/**/*.spec.[jt]s?(x)',
40. '**/__tests__/*.[jt]s?(x)'
41. ],
42. //https://github.com/facebook/jest/issues/6766
43. testURL:'http://localhost/',
44. //监视模式下的插件
45. watchPlugins:[
46. require.resolve('jest-watch-typeahead/filename'),
47. require.resolve('jest-watch-typeahead/testname')
48. ]
49. }

快速体验

默认测试用例：tests\unit\example.spec.js

1. //tests\unit\example.spec.js
2. //导入组件挂载器，不用手动写vue入口
3. import{shallowMount}from'@vue/test-utils'
4. //导入要测试的组件
5. importHelloWorldfrom'@/components/HelloWorld.vue'
7. describe('HelloWorld.vue',()=>{
8. it('rendersprops.msgwhenpassed',()=>{
9. constmsg='newmessage'
10. constwrapper=shallowMount(HelloWorld,{
11. props:{msg}
12. })
13. expect(wrapper.text()).toMatch(msg)
14. })
15. })

1. $npmruntest:unit

搭建完基本的 Vue 测试环境，在正式开始 Vue 测试之前，我们先了解一下测试开发的方法。

测试开发方式

测试不仅能够验证软件功能、保证代码质量，也能够影响软件开发的模式。

测试开发有两个流派：

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

什么是TDD

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

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

TDD开发流程：

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

1. //tests\unit\example.spec.js
2. //导入组件挂载器，不用手动写vue入口
3. import{shallowMount}from'@vue/test-utils'
4. //导入要测试的组件
5. importHelloWorldfrom'@/components/HelloWorld.vue'
7. import{add}from'@/utiles/math.js'
8. //输入：1,2
9. //输出：3
10. test('sum',()=>{
11. expect(add(1,2)).toBe(3)
12. })

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

1. //math.js
2. functionadd(a,b){
3. returna+b
4. }
5. exportdefaultadd

Vue 3 的 TDD 测试用例

src\components\TodoHeader.vue 组件内容

1. <template>
2. <header>
3. <h1>Todos</h1>
4. <input
5. v-model="inputValue"
6. placeholder="Whatneedstobedone?"
7. data-testid="todo-input"
8. @keyup.enter="handleNewTodo"
9. />
10. </header>
11. </template>

测试用例：

tests\unit\example.spec.js

1. //导入组件挂载器，不用手动写vue入口
2. import{shallowMount}from'@vue/test-utils'
3. //导入要测试的组件
4. importHelloWorldfrom'@/components/HelloWorld.vue'
6. importTodoHeaderfrom'@/components/TodoHeader.vue'
7. test('unit:newtodo',async()=>{
8. constwrapper=shallowMount(TodoHeader)//挂载渲染组件
9. constinput=wrapper.find('[data-testid="todo-input"]')//查找input
10. //给input设置一个值
11. consttext='helloworld'
12. awaitinput.setValue(text)
13. //触发事件
14. awaitinput.trigger('keyup.enter')
15. //=========
16. //以上是具体操作，输入内容按下回车后，希望做什么？↓

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

您的姓名 *

身份证号码 *

手机号码 *

选择地区 *

详细地址 *

留言备注 *