vue2.x集成jest

这段时间，一直在弄jest，在原有的vue2.x的项目上集成jest，网上说的一步到位的vue add @vue/cli-plugin-unit-jest好像不起作用，于是又找了一堆博客参考，发现各种问题，最后根据一个博主的，终于实现了。参考链接

1.首先安装：

npm install -D jest vue-jest babel-core babel-jest @vue/vue2-jest jsdom @babel/preset-env jsdom-global @vue/test-utils@1.0.3

运行会提示babel-core版本低，升级为7.0以上，安装如下命令：

npm install --save-dev babel-core@^7.0.0-bridge.0

2. 配置

在根目录新建jest.config.js,配置内容和上面博主的配置不一样，根据自己需要的配置，配置如下：

const path = require('path')
module.exports = {
  rootDir: path.resolve(__dirname, './'), // 根据自己项目来
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  'transformIgnorePatterns': ['<rootDir>/node_modules/'],
  testEnvironment: 'jsdom',
  collectCoverage: true,
  collectCoverageFrom: [
    "src/**/*.{js,vue}",
    "!src/main.js",
    "!src/router/index.js",
    "!src/components/quill-edit.vue",
    "!src/utils/contactsWindow.js",
    "!src/utils/serviceStorage.js",
    "!src/mixins/refreshTable.js",
    "!src/utils/waterMark.js",
    "!src/utils/bus.js",
    "!src/api/api.js",
    "!src/api/index.js",
    "!src/store/index.js",
    "!**/node_modules/**"
  ],
  testRegex: '(/tests/unit/.*\\.(test|spec))\\.[tj]sx?$',//测试文件的地址配置
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|gif|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    "\\.(css|scss)$": "identity-obj-proxy"
  },
  verbose: true,
  testEnvironmentOptions: {
    url: 'http://localhost'
  }
}

如果遇到报错，这个报错是参数testEnvironment: 'jsdom',引起的，如果testEnvironment: 'node',则不会报错

Error: Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

需要安装jsdom 包解决了这个问题：

npm install --save-dev jest-environment-jsdom

完成，可以愉快的写单元测试了，过个好年！