Vue 3 单元测试中如何应对模板嵌套挑战？

2024-03-19 14:12:18

单元测试 Vue 3 中使用 Vitest 和 test-utils 的模板嵌套

介绍

在 Vue 3 中构建应用程序时，我们经常需要将模板嵌套到另一个模板中。为了确保这些嵌套模板的行为符合预期，编写健壮的单元测试至关重要。本文将探讨如何使用 Vitest 和 test-utils 来编写这样的单元测试用例。

创建组件包装器

第一步是创建组件包装器，它允许我们与组件交互并验证其行为。我们可以使用 createWrapper 方法来实现这一点：

import { createWrapper } from '@vue/test-utils'

const wrapper = createWrapper(MySecondComponent, {
  props: {
    prop1: 'v1',
    prop2: 'v2'
  }
})

查找目标组件

接下来，我们需要找到嵌套的模板中的目标组件。我们可以使用 findComponent 方法：

const targetComponent = wrapper.findComponent({ name: 'someComponent' })

获取模板

为了挂载目标组件并创建子组件包装器，我们需要获取嵌套模板：

const template = targetComponent.get('#target')

挂载子组件

最后，我们可以使用 mount 方法挂载模板并创建子组件包装器：

const childWrapper = createWrapper(MySecondComponent, {
  props: {
    prop1: 'v1',
    prop2: 'v2'
  },
  attachTo: template
})

编写测试用例

现在，我们可以对 childWrapper 执行断言以测试目标组件的行为。以下是一些示例测试用例：

// 测试道具是否正确渲染
expect(childWrapper.props().prop1).toBe('v1')
expect(childWrapper.props().prop2).toBe('v2')

// 测试点击时是否触发事件
childWrapper.trigger('click')
expect(childWrapper.emitted().click).toBeTruthy()