Vue测试用法

小鲸鱼mm
122 阅读2分钟

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

一、测试分类

单元测试

  • 黑盒测试：平时开发过程中，做完一个项目都会有测试人员专门进行测试，他们不管内部实现机制，只管页面的输入输出。
  • 白盒测试：主要针对一些内部核心实现逻辑编写测试代码，对软件中逻辑路径进行覆盖测试在程序不同地方设立检查点，检查程序的状态，以确定实际运行状态与预期状态是否一致。

集成测试

集合多个测试过的单元一起测试，将所有模块按照设计需求组装成子系统或系统进行集成测试。主要体现一些模块独立运行没有问题，但是不能保证连接起来也能正常工作，一些局部反应不出来的问题，在全局上可能就会反应出来。

测试的好处

  • 提供描述组件行为的文档
  • 节省手动测试的时间
  • 减少研发新特性时产生的bug

二、测试实践

安装测试

在新建vue项目的时候可以选择Unit Testing和E2E Testing，这里我们选择E2E Testing，然后选择单元测试方案：Jest

如果是已经开发的项目，需要增加单元测试，可以在项目中集成：

集成Jest：vue add @vue/unit-jest

集成cypress：vue add @vue/e2e-cypress

编写单元测试

单元测试是指对软件中最小可测试的单元进行检查和验证。

测试文件命名规范：*.spec.js是命名规范

执行单元测试：npm run test:unit

测试vue组件

其实官方提供了专门用来单元测试的实用工具库@vue/test-units

举例子：检查mounted之后的预期结果，使用mount或shallowMount挂载组件，例如新建文件：example.spec.js

import { mount } from '@vue/test-utils'
it('renders props.msg when passed', () => {
         const msg = 'new message'
         // 给组件传递属性
         const wrapper = shallowMount(HelloWorld, {
             propsData: { msg }
         })
         // expect(wrapper.text()).toMatch(msg)
         // 查找元素
         const h1 = wrapper.find('h1')
         expect(h1.text()).toBe('new message')
})

因为更新操作通常是异步的，dom更新结果放在await语句后面测试

<div class='container' @click='name="jack"'>{{name}}</div>
//test:
test('点击div之后验证更新结果 ', async () => {
 const wrapper = shallowMount(HelloWorld)
 // 模拟点击⾏为
 const container = wrapper.find('.container') // 把变更状态操作放在await后⾯
 await container.trigger('click') expect(container.text()).toBe('baz')})

覆盖率

Jest自带覆盖率，可以很容易统计我们测试代码是否全面，需要在page.json中修改jest配置：

"jest": {
 "collectCoverage": true,
 "collectCoverageFrom": ["src/**/*.{js,vue}"],
}

如果需要使用独立的配置，就需要修改jest.config.js

module.exports = {
 "collectCoverage": true,
 "collectCoverageFrom": ["src/**/*.{js,vue}"]
}

然后再执行npm run test:unit，就可以看到测试的覆盖率

感谢阅读~

avatar
文章
阅读
粉丝