vue 数组 find_前端单元测试--vue组件测试

所谓千呼万唤始（屎）出来，继前作Jest基本语法后，憋了许久时间终于开始着手开始写组件测试了。

一、安装vue单元测试模块

1.1、新项目

vue-cli3本身集成有单元测试模块，对于新创建的项目来说，安装单元测试模块非常简单。只需要在创建项目的时候选择所需要的测试工具即可

项目创建成功后有一个test文件夹，里面有一个example.spec.js的简单测试用例，运行npm run test:unit，即可对HelloWorld组件进行测试。如果使用的IDE是Vs code的话，则可以安装Jest插件，这样就可无需运行test指令就开始跑单测。

1.2、老项目

如果是vue-cli3的项目的话可以运行vue add unit-jest指令，就会往我们的项目中安装@vue/cli-plugin-unit-jest单测模块，并添加jest.config.js配置文件，可对其进行简单的配置

module.exports = {
    
  preset: '@vue/cli-plugin-unit-jest',
  moduleFileExtensions: ['js', 'vue'], // jset匹配的文件后缀为js和vue
  transform: {
    
    '^.+.vue$': '<rootDir>/node_modules/vue-jest', // vue文件用vue-jest 处理
    '^.+.js$': '<rootDir>/node_modules/babel-jest' // js文件用babel-jest
  },
  moduleNameMapper: {
     // 处理webpack配置的别名
    '^@/(.*)$': '<rootDir>/src/$1'// @表示src文件夹
  },
  snapshotSerializers: ['jest-serializer-vue'], // 序列化测试结果，使其更美观
  testMatch: ['**/tests/**/*.spec.js'], // 单测文件地址
  transformIgnorePatterns: ['<rootDir>/node_modules/'], // 不进行匹配的目录
  collectCoverage: true, // 开启单测覆盖率
  collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**'] // 确定哪些需要文件需要生成测试报告
}

如果还需进行进一步的配置的话，可参考官方的配置文档。

二、vue组件测试

2.1、组件的挂载

由于前端组件化，使得UI测试变得容易很多。每个组件都可以被简化为类似于UI=fn(data)的表达式，这个表达式是一个描述UI是什么样的虚拟DOM，给这个表达式输入一些参数，就会得到UI描述的输出。

但是经过这样的抽象后还是存在一个问题，由于DOM是一个树形的结构。越处于上层的组件，其复杂度必然会随之提高。对于最底层的子组件来说，我们可以很容易得将其进行渲染并测试其逻辑的正确与否，但对于较上层的父组件来说，通常来说就需要对其所包含的所有子组件都进行预先渲染，甚至于最上面的组件需要渲染出整个 UI 页面的真实 DOM 节点才能对其进行测试，这显然是不可取的。

在vue-unit-test中就提供了shallowMount和mount 两个方法来实现组件的挂载，其中shallowMount就可以解决这个问题，它只渲染组件本身，但会保留子组件在组件中的存根。

区别这两种方法的目的在于，当我们只想对某个孤立的组件进行测试的时候，一方面可以避免其子组件的影响，另一方面对于包含许多子组件的组件来说，完全渲染子组件会导致组件的渲染树过大，这可能会影响到我们的测试速度

在组件挂载后，我们可以通过wrapper.vm访问到组件的实例，通过wrapper.vm进而可以访问到组件所有的props、data和methods等等。

import {
     shallowMount, mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld