TypeScript中如何用beforeEach挂载Vue组件精简重复测试代码

类型定义 #

你可以直接借助TS内置的InstanceType工具类型从组件定义推导出实例类型，无需手动声明接口：

• 首先从@vue/test-utils导入VueWrapper类型
• 用InstanceType<typeof SigninPage>获取组件实例类型，作为VueWrapper的泛型参数，同时也是vm变量的类型

localStorage设置时机 #

必须放在组件挂载之前执行。组件在挂载初始化阶段就会读取localStorage中的数据，如果等beforeEach先挂载完组件再在测试用例中设置localStorage，设置的值不会被组件读取到，不满足测试逻辑。

如果要最大化复用代码同时兼容不同前置逻辑，你可以将挂载逻辑封装为公共函数，在每个测试用例完成前置操作后再调用挂载：

完整可运行代码示例 #

import type { VueWrapper } from '@vue/test-utils'
import SigninPage from './SigninPage.vue'

// 提前推导组件实例类型，复用类型定义
type SigninPageInstance = InstanceType<typeof SigninPage>

describe("Stored id", () => {
  let wrapper: VueWrapper<SigninPageInstance>
  let vm: SigninPageInstance

  // 全局前置：每次测试前清空localStorage，避免用例互相干扰
  beforeEach(() => {
    localStorage.clear()
  })

  // 全局后置：每次测试后卸载组件，清理内存
  afterEach(() => {
    if (wrapper) wrapper.unmount()
  })

  // 公共挂载逻辑，避免重复编写
  const mountPage = () => {
    wrapper = mount(SigninPage, options)
    vm = wrapper.vm
  }

  it("ID empty", () => {
    // 无额外前置，直接挂载
    mountPage()
    // 后续测试逻辑
  });

  it("ID exist", () => {
    // 先设置localStorage，再挂载组件，保证组件能读取到设置值
    localStorage.setItem(process.env.VUE_APP_SIGNIN_STORED_USER_ID!, STORED_ID);
    mountPage()
    // 后续测试逻辑
  });
});

如果你的用例分组逻辑清晰，也可以针对不同前置场景拆分嵌套的describe块，在子describe的beforeEach中做对应前置操作后再挂载组件，同样可以实现DRY的需求。

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