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', // 現(xiàn)在不能通過webpack來解析s6 module，需要使用babel來解析，所以要開啟
     targets: {
      node: 'current' // 指定環(huán)境為當(dāng)前node版本，減少解析不識(shí)別語法的范圍
     }
    }
   ]],
   plugins: [[
    '@babel/plugin-transform-runtime', {
     corejs: 2,
     useESModules: false // 不允許使用es modules，babel需要通過@babel/plugin-transform-modules-commonjs將es module轉(zhuǎn)換為commonjs模塊解析
    }
   ]
  ]
 }
 }
}

// 假設(shè)在異步生命周期方法中，調(diào)用的函數(shù)是init，那我們就通過jest.fn()提供的方法進(jìn)行mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

// 在Jest提供的全局方法中，調(diào)用異步生命周期的方法，以保證每個(gè)斷言都是在生命周期之后
beforeEach(async () => {
 init.default.mockClear()
 await wrapper.vm.$mount() // 異步生命周期里會(huì)調(diào)用init方法
})

// 別怕，不需要你手動(dòng)寫，有人已經(jīng)寫了個(gè)插件了：babel-plugin-require-context-hook
// 在babel.config.js的env.test中加上這個(gè)插件
...
plugins: [..., 'require-context-hook']
...

// 在jest.config.json中配置一下setupFiles 
// setupFiles表示在每個(gè)運(yùn)行文件前添加的額外配置
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

// 創(chuàng)建.jest/register-context.js文件，引入時(shí)進(jìn)行全局的注冊
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();