vue单元测试实例（Vue-Jest 自动化测试基础配置详解）

? Check the features needed for your project:
 ◉ Choose Vue version
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing

? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated con
fig files

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
}

module.exports = {
  moduleFileExtensions: [ // 测试的文件类型
    'js',
    'jsx',
    'json',
    // tell Jest to handle *.vue files
    'vue',
    'ts',
    'tsx'
  ],
  transform: { // 转化方式
    // process *.vue files with vue-jest
    '^.+\\.vue$': require.resolve('vue-jest'),
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    require.resolve('jest-transform-stub'),
    '^.+\\.jsx?$': require.resolve('babel-jest'),
    '^.+\\.tsx?$': require.resolve('ts-jest'),
  },
  transformIgnorePatterns: ['/node_modules/'],  // 转化时忽略 node_modules
  // support the same @ -> src alias mapping in source code
  moduleNameMapper: { // @符号 表示当前项目下的src
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testEnvironment: 'jest-environment-jsdom-fifteen',
  // serializer for snapshots
  snapshotSerializers: [ // 快照的配置
    'jest-serializer-vue'
  ],
  testMatch: [ // 默认测试文件
    '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  // https://github.com/facebook/jest/issues/6766
  testURL: 'http://localhost/',
  watchPlugins: [
    require.resolve('jest-watch-typeahead/filename'),
    require.resolve('jest-watch-typeahead/testname')
  ],
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
}

 /Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    export default normalizeComponent;
    ^^^^^^

    SyntaxError: Unexpected token 'export'

transform: {
     '^.+\\.mjs$': 'babel-jest'
}

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    export default normalizeComponent;
    ^^^^^^

    SyntaxError: Unexpected token 'export'

transformIgnorePatterns: [
    // 转化时忽略 node_modules，但不包括 vue-runtime-helpers
    '/node_modules/(?!(vue-runtime-helpers)/)',
  ],

 TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/views/inventory-map/__tests__/available.spec.ts:15:1 - error TS2304: Cannot find name 'beforeEach'.

    15 beforeEach(() => {
       ~~~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:19:1 - error TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.

    19 describe('available-inventory-map', () => {
       ~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:20:3 - error TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.

{
    "compilerOptions": {
    "types": [
      "webpack-env",
      "jest"
    ],
  }
}

const _localVue = createLocalVue();
_localVue.use(Vuex);
_localVue.use(UI);
_localVue.use(i18nInstall);
_localVue.component('s-filter', SFilter);
_localVue.component('w-table', WTable);
_localVue.directive('xxx', {
  inserted: (el, binding) => {
    ....
  },
});
export const localVue = _localVue;

import enums from './enums';
export const systemStore = new Vuex.Store({
  actions: {},
  state: {
    enums: {
      systemEnums: enums,
    },
  },
});

import { localVue, systemStore } from '@/utils/unit-test/common';
import { mount } from '@vue/test-utils';
require('intersection-observer'); // 兼容jsdom不支持IntersectionObserver
import TaskList from '../available-inventory-map/index.vue'; // 引用要测试的业务
let store: any;
beforeEach(() => {
  store = systemStore;
});

describe('available-inventory-map', () => {
  it('筛选项测试', () => {
    const renderer = createRenderer();
    const wrapper = mount(TaskList, {
      localVue,
      store,
      attachToDocument: true,
    });
    const html = wrapper.html(); // 得到完整的 html 结构
    const vm = wrapper.vm; // 组件实例
    console.log(html, vm);
  })
}