下面是基于 jest 的单元测试环境搭建。

Jest是一个比较友好的的JavaScript测试框架，侧重于简单性。可以于 Babel、TypeScript、Node、React、Angular、Vue等一起使用

一、安装依赖

> npm i jest vue-jest babel-jest @vue/test-utils -D

Vue-Test-Utils是 Vue.js 官方的单元测试实用工具库。

二、jest配置

// ./test/unit/jest.conf.js
const path = require('path');

module.exports = {
  rootDir: path.resolve(__dirname, '../../'), // 同 webpack.context
  moduleFileExtensions: [ // 同 webpack.resolve.extensions
    'js',
    'json',
    'vue',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // 同 webpack.resolve.alias
  },
  transform: { // 同 webpack.module.rules
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  setupFiles: ['<rootDir>/test/unit/setup'], // 同 webpack.entry
  coverageDirectory: '<rootDir>/test/unit/coverage', // 同 webpack.output
  collectCoverageFrom: [ // 同 webpack 的 rule.include
    '!**/node_modules/**',
    '!src/main.js',
    'src/**/*.{js,vue}',
    '!src/router/index.js',
  ],
};

三、启动配置

1、编写setup.js（./test/unit/setup.js）

import Vue from 'vue';

Vue.config.productionTip = false;

2、在package.json添加启动脚本

"scripts": {
  "unit": "jest --config test/unit/jest.conf.js --coverage",
},

四、编写测试文件

假如有一个Foo组件：./src/components/foo/foo.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Foo',
  data() {
    return {
      msg: 'Hello Jest',
    };
  },
};
</script>

在同级目录下，添加一个对应的.spec.js文件(./src/components/foo/foo.spec.js)

import { shallowMount } from '@vue/test-utils';
import Foo from './foo';

describe('<foo/>', () => {
  it('should render correct contents', () => {
    const wrapper = shallowMount(Foo);
    expect(wrapper.find('h1').text())
      .toEqual('Welcome to Your Vue.js App');
  });
});

vue-test-utils提供了两种组件挂载的方式，分别为mount和shallowMount，shallowMount更关注于单组件使用，如果有嵌套子组件可以使用mount处理，代码如下：

const wrapper = mount(Parent, {
    stubs: {
        Child: true
    }
})

Child会被加载成<child-stub>，就像我们使用shallowMount一样。

五、启动

1、冷启动

> npm run unit

jest 会自动扫描项目目录下所有文件名以 .spec.js/.test.js 结尾的测试文件，并执行测试用例。

2、热重启

最简单的方式就是要vscode是下载个jest插件，需要把jest.pathToConfig指向项目jest配置文件

在项目根目录下，新建.vscode/settings.json，添加以下配置就可以了

{
    "jest.pathToConfig": "./test/unit/jest.config.js"
}

参考链接：

• https://zhuanlan.zhihu.com/p/48758013
• https://blog.csdn.net/nsrainbow/article/details/106099620