如何在Jest中测试Vue组件的activated生命周期钩子

核心前提 #

activated 钩子仅在被<keep-alive>包裹的组件中触发，这是多数测试失败的关键——若测试时未将组件放入<keep-alive>，钩子根本不会执行。

Vue 2 测试代码示例 #

假设目标组件为UserForm.vue，测试文件UserForm.spec.js：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import UserForm from '@/components/UserForm.vue'

const localVue = createLocalVue()

describe('UserForm activated 钩子', () => {
  it('触发后清空表单数据', () => {
    // 用keep-alive包裹组件挂载
    const wrapper = shallowMount(UserForm, {
      localVue,
      parentComponent: {
        template: '<keep-alive><user-form /></keep-alive>',
        components: { UserForm }
      }
    })

    // 先设置非空测试值
    wrapper.vm.name = 'John Doe'
    wrapper.vm.emailAddress = 'john@example.com'
    wrapper.vm.birthdate = '1990-01-01'

    // 手动触发activated钩子
    wrapper.vm.activated()

    // 验证数据是否清空
    expect(wrapper.vm.name).toBe('')
    expect(wrapper.vm.emailAddress).toBe('')
    expect(wrapper.vm.birthdate).toBe('')
  })
})

Vue 3 测试代码示例 #

Vue 3 中测试工具API有所调整，测试代码如下：

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

describe('UserForm activated 钩子', () => {
  it('触发后清空表单数据', async () => {
    // 用KeepAlive包裹组件挂载
    const wrapper = mount({
      components: { UserForm, KeepAlive },
      template: '<KeepAlive><UserForm ref="form" /></KeepAlive>'
    })

    const formVm = wrapper.findComponent(UserForm).vm

    // 设置非空测试值
    formVm.name = 'Jane Smith'
    formVm.emailAddress = 'jane@example.com'
    formVm.birthdate = '1995-05-05'

    // 手动触发activated钩子
    formVm.activated()

    // 验证数据清空
    expect(formVm.name).toBe('')
    expect(formVm.emailAddress).toBe('')
    expect(formVm.birthdate).toBe('')
  })
})

常见问题排查 #

• 若之前方案失效，优先检查组件是否被<keep-alive>包裹，普通组件挂载不会触发activated钩子。
• 测试前必须给目标数据设置非空初始值，否则断言空值无意义。
• Vue 3 中需确保正确从vue包导入KeepAlive组件。

内容的提问来源于stack exchange，提问作者John