vue jest单元测试环境搭建

温馨提示：vue-cli3版本已经自带了jest的单元测试环境。

开始搭建

安装依赖包

npm install babel-plugin-transform-vue-jsx jest jest-serializer-vue vue-test-utils babel-jest vue-jest

 

创建测试目录（一般习惯放在项目的根目录）

mkdir test/unit
cd test/unit

 

创建配置文件

为什么要模拟加载部分静态文件呢？

因为jest单元测试无需真实加载静态资源与解析css样式，jest主要工作是业务逻辑的执行与数据的比对。

const path = require('path');

module.exports = {
    verbose: true,
    testURL: 'http://localhost/',
    rootDir: path.resolve(__dirname, '../../'),
    moduleFileExtensions: [
        'js',
        'json',
        'vue'
    ],
    moduleNameMapper: {
        '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1',   # @路径转换，例如：@/views/shop/info.vue -> rootDir/src/shop/info.vue
        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/__mocks__/fileMock.js',   #  模拟加载静态文件
        '\\.(css|less)$': 'identity-obj-proxy'　　# 模拟加载样式文件   
    },
    testMatch: [
        '<rootDir>/test/unit/**/*.spec.js'
    ],
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
    },
    testPathIgnorePatterns: [
        '<rootDir>/test/e2e'
    ],
    setupFiles: ['<rootDir>/test/unit/setup'],
    snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
    coverageDirectory: '<rootDir>/test/unit/coverage',
    collectCoverageFrom: [
        'src/views/**/*.(js|vue)',
        '!src/main.js',
        '!src/router/index.js',
        '!**/node_modules/**'
    ]
};

 

创建脚本命令

# package.json 添加以下运行命令

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

 

运行

npm  run unit
报错：Plugin/Preset files are not allowed to export objects，webpack
该问题由：babel-jest@24.xxx的版本与babel@6.xx的版本不匹配造成的。
解决方法：我们把babel-jest@24.xx版本降为21.0.1就可以了

npm uninstall babel-jest
npm install babel-jest@21.0.1

修改完毕后再次运行
npm run unit

报错：error：Duplicate declaration "h" # h函数声明重复
该问题由：.babelrc重复使用了babel-plugin-transform-vue-jsx 造成的

{
  "presets": [
    "stage-3",
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    
  ],
  "plugins": ["transform-vue-jsx","syntax-jsx"],  # 保留这里的transform-vue-jsx
  "env": {
    "test": {
      "presets": ["env", "stage-3"],
      "plugins": ["transform-vue-jsx","transform-es2015-modules-commonjs", "dynamic-import-node"]  # 删除这里的transform-vue-jsx
    }
  }
}

修改完毕后再次运行
npm run unit

报错：error：Duplicate declaration "h" # h函数声明重复
这是babel-plugin-transform-vue-jsx的bug。如果出现这个错误建议使用babel-plugin-transform-vue-jsx@3.3.0版本查看详情
npm uninstall babel-plugin-transform-vue-jsx
npm install babel-plugin-transform-vue-jsx@3.3.0

报错：Cannot read property 'nodeName' of undefined
这是一般是UI框架组件库的版本太低，一些组件不支持node环境运行。
简单粗暴的解决方法：
npm update 更新依赖

修改完毕后再次运行
npm run unit  # 完美

 

 目录结构：

测试用例：

# seckillActivity.spec.js

import {mount} from 'vue-test-utils'; # API文档

let test = () => {
    return true;
};
describe('测试', () => {
    it('验证测试', () => {
        expect(test()).toBe(true);
    });
})
;

静态文件加载