如何测试 VUE Created HOOK 中调用的 SetTimeout 函数？使用 Vue 工具 - JEST答案

【问题标题】：How to test SetTimeout function calld in VUE Created HOOK? using Vue utils - JEST如何测试 VUE Created HOOK 中调用的 SetTimeout 函数？使用 Vue 工具 - JEST
【发布时间】：2021-06-15 06:36:18
【问题描述】：

我有一个带有标志 isVisible 的警报组件，该标志在创建组件时变为真，并且在创建的 HOOK 中我有一个 setTimeout，如果组件接收到 DESTROY 布尔属性，则启动：

props: {
  destroy: {
    type: Boolean,
    default: false,
  },
}

data() {
  return {
    isVisible: false,
  }
}

created() {
  this.isVisible = true
  if (this.destroy) {
    setTimeout(() => {
      this.isVisible = false
    }, 2500)
  },
}

我正在使用VUE UTILS / JEST测试setTimeout结束后组件是否消失，我试过了：

test('Component dissapears after 2.5 seconds when it receives DESTROY prop', async () => {
  const component = wrapper.get('[data-test-id="info-alert-wrapper"]')
  await wrapper.setProps({
    destroy: true,
  })

  await wrapper.vm.$options.created.call()

  expect(component.isVisible()).toBeFalsy()
})

但它会回复：TypeError: Cannot set property 'isVisible' of undefined

有人可以帮我解决这个问题吗？感谢你！ :)

【问题讨论】：

标签： vue.js jestjs vue-test-utils

【解决方案1】：

您需要在这里使用假计时器。毕竟导入电话jest.useFakeTimers()。然后在挂载组件调用jest.runTimersToTime(2500)后进行测试。之后你可以做你的断言。测试示例：

jest.useFakeTimers()

test('Component disappears after 2.5 seconds when it receives DESTROY prop', () => {
  const wrapper = shallowMount(YourSuperComponent, {
    propsData: {
      destroy: true
    }
  })
  jest.runTimersToTime(2500)
  expect(wrapper.vm.isVisible).toBe(false)
})

【讨论】：

很高兴代码有帮助！）然后将我的帖子标记为您问题的答案！ ;)
抱歉，这是我的第一个问题 :D 我只是标记了你的答案 :)

【解决方案2】：

@Eduardo 的回答是正确的，只是注意到 Jest 自 Jest 22.0.0 起将 runTimersToTime() 重命名为 advanceTimersByTime()

【讨论】：