服务器之家

服务器之家 > 正文

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

时间:2021-07-01 00:00     来源/作者:勾勾的前端世界

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

项目环境搭建

 

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

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

一旦安装完成,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.     // tell Jest to handle *.vue files 
  8.     'vue' 
  9.   ], 
  10.   // 转换方式 
  11.   transform: { 
  12.     // process *.vue files with vue-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.   // support the same @ -> src alias mapping in source code 
  22.   // webpack 的别名映射转换 
  23.   moduleNameMapper: { 
  24.     '^@/(.*)$':'<rootDir>/src/$1' 
  25.   }, 
  26.   // 指定测试环境为 jsdom  
  27.   testEnvironment:'jest-environment-jsdom-fifteen'
  28.  
  29.   // serializer for snapshots 
  30.   // 快照序列化器 
  31.   // 使用 jest-serializer-vue 进行组件快照的序列化方式 
  32.   // 就是将组件转为字符串,后面进行快照测试时,就可以看到了 
  33.   snapshotSerializers: [ 
  34.     'jest-serializer-vue' 
  35.   ], 
  36.  
  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.   ] 

快速体验

 

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

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

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

测试开发方式

 

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

测试开发有两个流派:

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

什么是TDD

 

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

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

TDD开发流程:

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

  • 编写测试用例
  • 运行测试
  • 编写代码使测试通过
  • 重构/优化代码
  • 新增功能,重复上述步骤
  1. // tests\unit\example.spec.js 
  2. // 导入组件挂载器,不用手动写vue入口 
  3. import { shallowMount } from'@vue/test-utils' 
  4. // 导入要测试的组件 
  5. import HelloWorld from'@/components/HelloWorld.vue' 
  6.  
  7. import {addfrom'@/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.   return a + b 
  4. exportdefault add 

Vue 3 的 TDD 测试用例

src\components\TodoHeader.vue 组件内容

  1. <template> 
  2.   <header> 
  3.    <h1>Todos</h1> 
  4.     <input  
  5.      v-model="inputValue" 
  6.      placeholder="What needs to be done?" 
  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. import HelloWorld from'@/components/HelloWorld.vue' 
  5.  
  6. import TodoHeader from'@/components/TodoHeader.vue' 
  7. test('unit: new todo',async () => { 
  8.   const wrapper =shallowMount(TodoHeader) // 挂载渲染组件 
  9.   const input = wrapper.find('[data-testid="todo-input"]') // 查找input 
  10.   // 给input设置一个值 
  11.   const text ='helloworld' 
  12.   await input.setValue(text) 
  13.   // 触发事件 
  14.   await input.trigger('keyup.enter'
  15.   // ========= 
  16.   // 以上是具体操作,输入内容按下回车后,希望做什么?↓

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部