Jest 测试单文件组件

前期准备

---

使用vue-cli脚手架工具初始化一个webpack模版的项目，在命令行配置单元测试时选择手动配置。模版初始化完成后，整个项目已经安装并配置好了 webpack、vue-loader 和 Babel。

我们要做的第一件事就是安装 Jest 和 Vue Test Utils：

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

然后我们在package.json里面配置好测试命令：

// package.json

{

    "scripts": {

        "test": "jest"

    }

}

在 Jest 中处理单文件组件

为了告诉 Jest 如何处理 *.vue 文件，我们需要安装和配置 vue-jest 预处理器：

npm install --save-dev vue-jest

为 Jest 配置 Babel

尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest：

npm install --save-dev babel-jest

除此之外， webpack模版 使用了 babel-preset-env，这时默认的 Babel 配置会关闭 ES modules 的转译，因为 webpack 已经可以处理 ES modules 了。然而，我们还是需要为我们的测试而开启它，因为 Jest 的测试用例会直接运行在 Node 上。

同样的，我们可以告诉 babel-preset-env 面向我们使用的 Node 版本。这样做会跳过转译不必要的特性使得测试启动更快。

为了仅在测试时应用这些选项，可以把它们放到一个独立的 env.test 配置项中 (这会被 babel-jest 自动获取)。

.babelrc 文件示例：

babelrc 文件

测试覆盖率

Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个简单的起步的例子：扩展你的 jest 配置的collectCoverage 选项，然后添加 collectCoverageFrom 数组来定义需要收集测试覆盖率信息的文件。我们还可以可以通过 coverageReporters 选项来定制覆盖率报告的格式。

针对以上所有配置，我们可以创建一个配置文件jest.conf.js，并将它放在相应目录底下：

jest.conf.js

package.json里面的命令也要改一下："test": "jest --config test/unit/config/jest.conf.js"。

放置测试文件

默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件

测试规范示例

import { mount } from '@vue/test-utils'

import Component from './component'

describe('Component', () => {

    test('is a Vue instance', () => {

        const wrapper = mount(Component)

        expect(wrapper.isVueInstance()).toBeTruthy()

    })

})

快照测试

当你用 Vue Test Utils 挂载一个组件时，你可以访问到 HTML 根元素。这可以保存为一个快照为快照测试所用。每当你想要确保你的UI不会有意外的改变，快照测试是非常有用的工具。

it('renders correctly', () => {

    const wrapper = mount(Component)

    expect(wrapper.element).toMatchSnapshot()

})

我们可以通过一个自定义的序列化工具改进被保存的快照：

npm install --save-dev jest-serializer-vue

在jest.conf.js文件中要添加相应选项：

// 快照的序列化工具

"snapshotSerializers":["jest-serializer-vue"]

可能存在的问题

在运行test命令时报错：Plugin/Preset files are not allowed to export objects，webpack

该问题由：[email protected]的版本与[email protected]的版本不匹配造成的。

解决方法：我们把[email protected]版本降为21.0.1就可以了

测试脚本走不通很多时候都是各个模块版本不匹配造成的！