用 Jest 测试单文件组件

我们在 GitHub 上放有一个关于这些设置的示例工程。

Jest 是一个由 Facebook 开发的测试运行器，致力于提供一个“bettery-included”单元测试解决方案。你可以在其官方文档学习到更多 Jest 的知识。

安装 Jest

我们假定你在一开始已经安装并配置好了 webpack、vue-loader 和 Babel——例如通过 vue-cli 创建了 webpack-simple 模板脚手架。（1140267353）群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

另一种方案，如果你在使用 Vue CLI 构建你的工程也可以使用cli-plugin-unit-jest插件来运行 Jest 测试。

跳到[在 Jest 中处理单文件组件](#在 Jest 中处理单文件组件)并遵循其指示以处理你的 Vue 单文件组件。

如果你在使用 Babel 进行转译 (这是创建新工程的默认配置)，你也需要在项目中的 package.json 配置 Jest 的 JavaScript 转换，参考为 Jest 配置 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