Vue单元测试：Vue Test Utils + Jest

安装配置

1、 安装Jest和Vue Test Utils。

$ npm install --save-dev jest @vue/test-utils

2、安装vue-jest。.vue文件一般为单文件组件（Single-File Componengts），即html，js，css在一个文件中，vue-jest告诉Jest如何处理这样的.vue文件。目前vue-jest还不完全支持vue-loader的所有功能。

$ npm install --save-dev vue-jest

3、安装babel-jest。为支持ES2015+的语法，引入babel-jest，将按ES2015+标准书写的代码降级编译（转译）为浏览器可解析的ES4/5的代码。

$ npm install --save-dev babel-jest

babel 7的使用如下命令安装：

npm install --save-dev babel-jest 'babel-core@^7.0.0-0'

4、配置package.json。

{
    "scripts": {
        "test": "jest"
    }
    // ...
    "jest": {
        "moduleFileExtensions": [
            "js",
            "json",
            // 告诉Jest处理*.vue文件
            "vue"
        ],
        "transform": {
            // 用vue-jest处理*.vue文件
            ".*\\.(vue)$": "vue-jest",
            // 用babel-jest处理js
            "^.+\\.js$": "/node_modules/babel-jest"
        },
        "moduleNameMapper": {
            // 支持代码中@->src的别名映射
            "^@/(.*)$": "/src/$1"
        },
        "collectCoverage": true,
        "collectCoverageFrom": [
            "**/*.{js,vue}",
            "!**/node_modules/**"
        ],
        "coverageReporters": ["html", "text-summary"]
    }
}

5、配置.babelrc。项目使用的是babel-prese-env，默认的Babel配置禁用了对ES modules的转译功能（由webpack处理），但是Jest test是直接运行在Node上的，需要在测试时开启这个功能。

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

问题集锦

1、加了coverage后，运行报错：

ERROR: unknown: Duplicate declaration "h" (This is an error on an internal node. Probably an internal error)

解决：原先.babelrc里的配置如下：

"plugins": [
    "transform-vue-jsx",    # 重复
    "transform-runtime"
],
"env": {
    "test": {
        "presets": [
            ["env", { "targets": { "node": "current" }}],
            "stage-2"
        ],
        "plugins": [
            "transform-vue-jsx",    # 删掉
            "transform-es2015-modules-commonjs",
            "dynamic-import-node"
        ]
    }
}

transform-vue-jsx被引入了两次，导致每个render()被注入两遍h，详情见babel-plugin-transform-vue-jsx issue152

2、编辑器里报错：'describe is not defined'

在测试文件*.spec.js所在的文件目录下创建.eslintrc.js文件：

module.exports = {
    env: {
        jest: true
    }
}

3、npm run test报错：'Requires Babel "^7.0.0-0", but was loaded with "6.26.3"'

是因为项目里用的babel是版本7的，babel升到7后，命名方式变了，babel-core => @babel/core，babel-eslint => @babel/eslint等。babel-jest还未升级，使用的也还是老版本的babel-core，所以安装babel-jest时要通过以下命令做版本兼容。

npm install --save-dev babel-jest 'babel-core@^7.0.0-0'

详情见Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"