Jest结合Vue-test-utils进行单元测试的前期准备工作----环境搭建

一、项目的环境配置
1.Win10下已安装Node.js
2.在package.json配置文件添加如下配置：

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

此处的jest.conf.js文件在项目根目录下的test文件夹下

"rxjs": "^6.3.3",

devDependencies下添加：

    "jest": "23.6.0",
    "babel-jest": "23.6.0",
    "vue-jest": "3.0.0",
    "@vue/test-utils": "1.0.0-beta.25"

3.test文件夹下需新建3个js文件
（1）jest.conf.js

const path = require('path');

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

(2).setup.js

import Vue from 'vue';
import { config } from '@vue/test-utils';

Vue.config.productionTip = false;

// provide 的模拟
config.provide.GLOBAL = {
  logined: false,
};

(3).utils.js

import { BehaviorSubject } from 'rxjs';

function mockSubject(data) {
  return new BehaviorSubject(data);
}

export {
  mockSubject,
};

二、项目根目录shift+鼠标右键，选择“在此处打开powershell窗口”

使用npm install命令，将package.json中添加的项目所需依赖文件安装到项目中，至此，测试环境搭建完毕，后续编写代码测试用例进行测试即可。