Vue测试工具@vue/test-utils使用详解

步骤:

1. 在测试文件中引入要测试的组件
2. 定义mock方法, naming以“mock”开头,并在methods选项中添加这个方法
3. 在beforeEach()中使用将mock方法设置到组件的methods选项中,覆盖原有方法
4. 在测试用例中正常调用该方法并断言
5. 在afterEach()中将mock方法从methods中删除,恢复原状

这里给出一个待测试的Foo.vue组件示例代码:

vue
<template>
  <div>
    <p>methodA called {{ count }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    methodA() {
      this.count++
      this.methodB()
    },
    methodB() {
      console.log('methodB called')
    }
  }
}
</script>

该组件包含:

- data中定义count数据
- methods中定义methodA和methodB两个方法
- methodA方法中调用methodB方法并增加count
- template中显示count被调用的次数

我们的测试目标是验证:

- 调用methodA时,是否会调用methodB方法
- 调用methodA后,count是否增加

那么,针对这个Foo.vue组件,测试文件可以这样写:

js
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(Foo)
    wrapper.vm.mockMethodB = jest.fn()
  })
  
  it('calls methodB', () => {
    wrapper.vm.methodA()
    expect(wrapper.vm.mockMethodB).toHaveBeenCalled()
  })
  
  it('updates count', () => {
    wrapper.vm.methodA()
    expect(wrapper.vm.count).toEqual(1)
  })
  
  afterEach(() => {
    wrapper.vm.count = 0
    wrapper.vm.mockMethodB = null 
  })
})

我们在beforeEach中添加mockMethodB来mock methodB方法,并在afterEach中清除相关mock。
然后分别写两个测试用例来验证methodB是否被调用和count是否加1。

这个简单示例展示了如何针对一个复杂组件编写Vue单元测试,使用mock方法隔离测试以及在beforeEach/afterEach准备与清理测试环境。掌握这些技巧可以编写出更加健壮和可靠的Vue应用测试。