如何测试VUE Created HOOK中调用的SetTimeout函数？使用 Vue utils - JEST

Question

我有一个警报组件，它有一个 flag isVisible，当创建该组件时，该标志变为 true ，并且在创建的 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

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

Answer 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.advanceTimersByTime(2500)
  expect(wrapper.vm.isVisible).toBe(false)
})