vue-test-utils初使用详解

yarn add @vue/test-utils vue-jest
yarn jestjest-serializer-vue
yarn add babel-jest babel-core@^7.0.0-bridge.0

// jest.config.json
{    
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest", // jest使用babel解析js
    ".\\.(vue)$": "<rootDir>/node_modules/vue-jest" // jest对vue单文件的解析
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
   ],
  "moduleNameMapper": {
    "^@/(.)$": "<rootDir>/src/$1", //为了解析webpack配置的alias字段
    "^tim-architect/(.)$": "<rootDir>/tim-architect/$1"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!(yourModuleName))"
  ]
}

{
  ...,
 env: {
  test: {
   presets: [[
    '@babel/env',
    {
     modules: 'auto', // 现在不能通过webpack来解析s6 module，需要使用babel来解析，所以要开启
     targets: {
      node: 'current' // 指定环境为当前node版本，减少解析不识别语法的范围
     }
    }
   ]],
   plugins: [[
    '@babel/plugin-transform-runtime', {
     corejs: 2,
     useESModules: false // 不允许使用es modules，babel需要通过@babel/plugin-transform-modules-monjs将es module转换为monjs模块解析
    }
   ]
  ]
 }
 }
}

// 假设在异步生命周期方法中，调用的函数是init，那我们就通过jest.fn()提供的方法进行mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

// 在Jest提供的全局方法中，调用异步生命周期的方法，以保证每个断言都是在生命周期之后
beforeEach(async () => {
 init.default.mockClear()
 await wrapper.vm.$mount() // 异步生命周期里会调用init方法
})

// 别怕，不需要你手动写，有人已经写了个插件了babel-plugin-require-context-hook
// 在babel.config.js的env.test中加上这个插件
...
plugins: [..., 'require-context-hook']
...

// 在jest.config.json中配置一下setupFiles 
// setupFiles表示在每个运行文件前添加的额外配置
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

// 创建.jest/register-context.js文件，引入时进行全局的注册
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();