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

Question

我有一个带有标志 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

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

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

Answer 2

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

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

How to test SetTimeout function calld in VUE Created HOOK? using Vue utils - JEST

vue.js

jestjs

vue-test-utils