vue-cli 创建项目

vue create vue-test

Vue CLI 3可以向项目组中直接添加unit-jest

vue add @vue/unit-jest






  • 升级vue版本及其依赖

vue版本如果太旧的不支持此种方式直接添加单元测试,可以选择更新vue版本2.5以上,并更新其依赖库。 此种方法可能会出现浏览器报exportes错误,把.babelrc文件transform-runtime删除即可。

  • 采用旧版本方式

Note: This example is outdated. It’s now recommended to scaffold your project with Vue CLI 3 which provides out-of-the-box configurations for unit testing.


Example project using Jest + vue-test-utils together

This is based on the vue-cli webpack-simple template. Test-specific changes include:

Additional Dependencies

  • vue-test-utils
  • jest
  • babel-jest (for ES2015+ features in tests)
  • vue-jest (for handling *.vue files in tests)
  • jest-serializer-vue (for snapshot tests)

Additional Configuration


The following configurations are recommended for Jest:

  "jest": {
    "moduleFileExtensions": [
      // tell Jest to handle *.vue files
    "transform": {
      // process js with babel-jest
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      // process *.vue files with vue-jest
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    // support the same @ -> src alias mapping in source code
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    // serializer for snapshots
    "snapshotSerializers": [


Our default Babel config disables ES modules transpilation because webpack already knows how to handle ES modules. However, we do need to enable it for our tests because Jest tests are run directly in Node.

Also, if our tests are run in a relatively newer version of Node, most of the ES features are already supported - we can tell babel-preset-env to target the Node version we are using. This skips transpiling unnecessary features and makes our tests boot faster.

To apply these options only for tests, we need to add a separate config under env.test (this will be automatically picked up by babel-jest):

  "presets": [
    ["env", { "modules": false }]
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]

Build Commands

## install dependencies
npm install

## serve with hot reload at localhost:8080
npm run dev

## build for production with minification
npm run build

## run tests
npm test

For detailed explanation on how things work, consult the docs for vue-test-utils.