Jest.js 如何在Vue 3中对“defineAsyncComponent”进行单元测试？

p1iqtdky 于 2022-12-08 发布在 Jest

关注(0)|答案(1)|浏览(264)

假设我想对这个实用函数进行单元测试，我使用的是Vue 3，但是这个代码在“正常”的js文件中，而不是sfc。
我怎么能那样做呢？

function getDynamicComponent() {
  if (...)  {
    return defineAsyncComponent(() => import('../path/to/component-A.vue'))
  } else {
    return defineAsyncComponent(() => import('../path/to/component-B.vue'))
  }
}

在这种情况下，我更喜欢模拟函数的实现并检查.toHaveBeenCalledWith(...)，但我不能用import来做，对吗？
附言：如果你能告诉我Jest或Vitest的语法，我会很感激

jestjs

来源：https://stackoverflow.com/questions/74112157/how-to-unit-test-defineasynccomponent-in-vue-3

1条答案

按热度按时间

fhity93d1#

作为对我评论的补充，您可以使用Jest来模拟该函数：
第一个
然后您可以测试defineAsyncComponent是否被调用：

expect(defineAsyncComponent).toHaveBeenCalled()

使用toHaveBeenCalledWith会比较棘手，因为它使用toEqual，所以测试总是会失败
您可以在defineAsyncComponent函数上定义实作，以测试参数：

let defineAsyncComponent = jest.fn().mockImplementation((fn) => {
    expect(typeof fn).toBe('function')
})

您也可以调用该函数并检查返回值，这是一个承诺，但此时您正在测试import（）函数，因此我不认为它会为您的测试增加价值：

let defineAsyncComponent = jest.fn().mockImplementation((fn) => {
    expect(typeof fn).toBe('function')
    expect(typeof fn().then).toBe('function')
})

赞(0）回复(0）举报 2022-12-08

我来回答

Jest.js 如何在Vue 3中对“defineAsyncComponent”进行单元测试？

1条答案

相关问题

热门标签

最新问答