详解Jest结合Vue-test-utils使用的初步实践

介绍

Vue-test-utils是Vue的官方的单元测试框架,它提供了一系列非常方便的工具,使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多,但 Vue Test Utils 都能够支持。它是测试运行器无关的。

Jest,是由Facebook开发的单元测试框架,也是Vue推荐的测试运行器之一。Vue对它的评价是:

Jest 是功能最全的测试运行器。它所需的配置是最少的,默认安装了 JSDOM,内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性,但仍不是 vue-loader 100% 的功能。

我认为可以这样理解,Vue-test-utils在Vue和Jest之前提供了一个桥梁,暴露出一些接口,让我们更加方便的通过Jest为Vue应用编写单元测试。

安装

通过Vue-cli创造模板脚手架时,可以选择是否启用单元测试,并且选择单元测试框架,这样Vue就帮助我们自动配置好了Jest。

如果是后期添加单元测试的话,首先要安装Jest和Vue Test Utils:

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

然后在package.json中定义一个单元测试的脚本。

// 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'
 },
}

其他的具体的配置可以参考官方文档。

配置好了之后,就可以开始编写单元测试了。

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

describe('Component', () => {
 test('是一个 Vue 实例', () => {
  const wrapper = mount(Component)
  expect(wrapper.isVueInstance()).toBeTruthy()
 })
})

上面的例子中,就是通过vue-test-utils提供的mount方法来挂载组件,创建包裹器和Vue实例

如果不使用vue-test-utils也是可以挂载组件的:

import Vue from 'vue';
import Test1 from '@/components/Test1';

const Constructor = Vue.extend(HelloWorld);
const vm = new Constructor().$mount();

启用单元测试的命令:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/223.html