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

启用单元测试的命令：

npm run unit

可以在后面加上– –watch启动监听模式

别名配置

使用别名在Vue中很常见，可以让我们避免使用复杂、易错的相对路径：

import Page from '@/components/Test5/Test5'

上面的@就是别名，在使用Vue-cli搭建的项目中，默认已经在webpack.base.conf.js中对@进行了配置：

module.exports = {
 ...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': path.join(__dirname, '..', 'src')
  }
 },
}

同样，使用Jest时也需要在Jest的配置文件jest.conf.js中进行配置

"jest": {
 "moduleNameMapper": {
  '^@/(.*)$': "<rootDir>/src/$1",
 },
...

Shallow Rendering

创建一个App.vue：

<template>
 <div id="app">
  <Page :messages="messages"></Page>
 </div>
</template>
<script>
 import Page from '@/components/Test1'
 export default {
  name: 'App',
  data() {
   return {
    messages: ['Hello Jest', 'Hello Vue']   }
  },
  components: {
   Page
  }
 }
</script>

然后创建一个Test1组件

<template>
 <div>
  <p v-for="message in messages" :key="message">{{message}}</p>
 </div>
</template>
<script>
  export default {
  props: ['messages'],
  data() {
   return {}
  }
 }
</script>

针对App.vue编写单元测试文件App.spec.js

// 从测试实用工具集中导入 `mount()` 方法
import { mount } from 'vue-test-utils';
// 导入你要测试的组件
import App from '@/App';
describe('App.test.js', () => {
 let wrapper,
  vm;
 beforeEach(() => {
  wrapper = mount(App);
  vm = wrapper.vm;
  wrapper.setProps({ messages: ['Cat'] })
 });
 it('equals messages to ["Cat"]', () => {
  expect(vm.messages).toEqual(['Cat'])
 });
 // 为App的单元测试增加快照（snapshot）：
 it('has the expected html structure', () => {
  expect(vm.$el).toMatchSnapshot()
 })
});

执行单元测试后，测试通过，然后Jest会在test/__snapshots__/文件夹下创建一个快照文件App.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App.test.js has the expected html structure 1`] = `								 
 2/15   首页 上一页 1 2 3 4 5 6 下一页 尾页