浅谈 Vue 单文件组件测试

2024-01-29 08:09:23

前言

在 Vue.js 的单文件组件中，我们经常需要进行单元测试以确保组件的正确性。虽然 Vue.js 官方提供了测试例子，但涉及的范围较窄，当遇到组件中存在异步传参、触发 action、获取 state 等问题时，编写单元测试便不知从何下手。

异步传参测试

在 Vue 单文件组件中，经常需要进行异步传参。例如，在组件中使用 axios 进行数据请求时，就需要对异步请求进行测试。为了测试异步传参，可以使用 Jest 的 async 和 await 语法。

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('should fetch data', async () => {
    const wrapper = mount(MyComponent)

    // 等待异步请求完成
    await wrapper.vm.$nextTick()

    // 断言组件中的数据是否正确
    expect(wrapper.vm.data).toEqual({ foo: 'bar' })
  })
})

触发 action 测试

在 Vue 单文件组件中，经常需要触发 action。例如，在组件中点击按钮时，需要触发一个 action 来更新组件的状态。为了测试触发 action，可以使用 Jest 的 trigger 方法。

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('should update state when button is clicked', () => {
    const wrapper = mount(MyComponent)

    // 触发按钮点击事件
    wrapper.find('button').trigger('click')

    // 断言组件中的状态是否正确
    expect(wrapper.vm.count).toEqual(1)
  })
})

获取 state 测试

在 Vue 单文件组件中，经常需要获取 state。例如，在组件中需要获取一个 state 来渲染组件。为了测试获取 state，可以使用 Jest 的 vm 属性。

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('should render state', () => {
    const wrapper = mount(MyComponent, {
      data() {
        return {
          count: 1
        }
      }
    })

    // 获取组件中的状态
    const count = wrapper.vm.count

    // 断言组件中的状态是否正确
    expect(count).toEqual(1)
  })
})