## 一、概述 jest 是facebook推出的一款测试框架，它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。它对同样是 Facebook 的开源前端框架 React 的测试十分友好。 > vue-cli3版本已经自带了jest的单元测试环境； ## 二、jest与Vue-test-utils Vue-test-utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是测试运行器无关的。 Vue-test-utils在Vue和Jest之前提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。 ## 三、安装配置 ``` npm install --save-dev jest @vue/test-utils ``` 然后在`package.json`中定义一个单元测试的脚本。 ```js // package.json { "scripts": { "test": "jest" } } ``` 为了告诉Jest如何处理`*.vue`文件，需要安装和配置vue-jest预处理器： ``` npm install --save-dev vue-jest ``` 在`jest.conf.js`配置文件中进行配置： ``` module.exports = { moduleFileExtensions: ['js', 'json', 'vue'], moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1' }, transform: { '^.+\\.js$': '<rootDir>/node_modules/babel-jest', '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest' }, } ``` 配置好了之后，就可以开始编写单元测试了。 ## 四、实例 通过vue-test-utils提供的`mount`方法来挂载组件，创建包裹器和Vue实例； ``` import { mount } from '@vue/test-utils' import Component from './component' describe('Component', () => { test('是一个 Vue 实例', () => { const wrapper = mount(Component) expect(wrapper.isVueInstance()).toBeTruthy() }) }) ``` 启用单元测试的命令： ``` npm run unit ```