vue单元测试（jest）

一、环境配置

1、安装依赖

vue add @vue/cli-plugin-unit-jest

确保已经安装了vue-cli3或vue-cli4，可以通过vue --version测试

安装完成，时间略微长一点，5-10分钟

安装完成后package.json里会增加这些依赖

 文件根目录多出一个jest.config.js文件以及tests/unit/example.spec.js

 依赖安装完成后需要npm install

2、修改测试案例

修改tests文件夹下的unit文件夹下的example.spec.js中的代码

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

describe('HelloWorld.vue', () => {
  const wrapper = mount(HelloWorld);
  const vm = wrapper.vm;
  it('渲染', () => {
    expect(wrapper.html()).toContain('<span>0</span>')
  })
  it('计数器在点击按钮时自增', () => {
    // 点击之前
    console.log('计数器点击之前的值：' + vm.count);
    // 调用实例中的increment方法，点击计数器
    vm.increment();
    // 点击之后
    console.log('计数器点击之后的值：' + vm.count);
    // 判断最后的count是否为最后对应的值
    expect(vm.count).toBe(1);
  })
})

修改HelloWorld.vue中的代码

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment">自增</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

3、运行

npm run test:unit

运行结果

 单独运行一个测试用例：

npm run test:unit <name>

例如：npm run test:unit example