介绍

@vue/test-utils 是官方的底层组件测试库，用来提供给用户访问 Vue 特有的 API。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是与测试运行器无关的。
Jest是一个由 Facebook 开发的测试运行器，是Vue推荐的测试运行器之一。

Jest是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性，但仍不是 vue-loader 100% 的功能。

安装

通过Vue-cli创造模板脚手架时，可以选择是否启用单元测试，并且选择单元测试框架，这样Vue就帮助我们自动配置好了Jest。

如果是后期添加单元测试的话，首先要安装Jest和Vue Test Utils：

npm install --save-dev jest @vue/test-utils

为了告诉 Jest 如何处理 *.vue 文件，我们需要安装和配置 vue-jest 预处理器：

npm install --save-dev vue-jest

安装 babel-jest：

npm install --save-dev babel-jest

配置

为了仅在测试时应用这些选项，可以把它们放到一个独立的 env.test 配置项中 (这会被 babel-jest 自动获取)。

.babelrc/ babel.config.js文件示例:

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

根目录下创建test文件夹,创建以下目录文件：

添加jest配置，jest.conf.js内容如下：

const path = require('path')

module.exports = {
    verbose: true,
    testEnvironment: 'jsdom',
    rootDir: path.resolve(__dirname, '../../'),
    moduleFileExtensions: ['js', 'ts', 'json', 'vue'], // 告诉jest处理哪些文件
    moduleNameMapper: {
        '^@/(.*?.?(js|vue)?|)$': '<rootDir>/src/$1', // @路径转换，例如：@/components/Main.vue -> rootDir/src/components/Main.vue
    },
    testMatch: [
        //匹配测试用例的文件
        '<rootDir>/test/unit/specs/*.spec.{vue,js,jsx,ts,tsx}',
    ],
    transform: {
        '^.+\.(vue)$': '<rootDir>/node_modules/vue-jest', // 用 `vue-jest` 处理 `*.vue` 文件
        '^.+\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest', 用 `bael-jest` 处理 `*.js/ts`
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/'],
    coverageDirectory: '<rootDir>/test/unit/coverage', // 覆盖率报告的目录
}

package.json中定义一个单元测试的脚本

"unit": "jest --config ./test/unit/jest.config.js --coverage"

在specs下写测试用例代码，像下图所示（组件名+spec）

import { mount } from "@vue/test-utils";
import InfoCard from '@/components/InfoCard.vue'

test('测试', () => {
    const wrapper = mount(InfoCard, {
        props: {
            infoData: [
                {
                    key: '00',
                    value: '99'
                },
                {
                    key: '00',
                    value: '99'
                }
            ]
        }
    })
    expect(wrapper.html()).toContain('00')
})

执行脚本npm run unit

%stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？

%Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？

%Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？

%Lines行覆盖率（line coverage）：是不是每一行都执行了？

Jest+Vue-test-utils基础

介绍

安装

配置