在创建的钩子（vue.js）中模拟 setInterval答案

【问题标题】：mocking setInterval in created hook (vue.js)在创建的钩子（vue.js）中模拟 setInterval
【发布时间】：2020-12-31 16:34:37
【问题描述】：

我试图在我的 created 钩子中模拟一个 setInterval 但无论我尝试什么该函数永远不会被调用。到目前为止我所做的是使用jest.useFakeTimers 和内部每个测试我都会使用jest.advanceTimersByTime(8000) 来检查我的api 是否被调用。我将不胜感激任何意见/帮助。谢谢

我的 vue 文件

  created() {
    setInterval(() => this.checkStatus(), 8000)
  },
  methods: {
    async checkStatus() {
      let activated = false
      if (!this.isLoading) {
        this.isLoading = true
        let res = await this.$UserApi.getUserActivateStatus(this.accountId)
        this.isLoading = false
        if (res.success) {
          activated = res.activated
        }
        if (activated) {
          console.log("activated")
        } else {
          console.log("error")
        }
      }
    }
  }

我的测试文件

import { shallowMount, config } from "@vue/test-utils"
import Step4 from "../../../login/smart_station/step4"

describe("Step4", () => {
  let wrapper
  const $route = {
    query: {
      account_id: "99"
    }
  }

  const mockGetUserActivateStatus = jest.fn(() =>
    Promise.resolve({ success: true, activated: true })
  )

  beforeEach(() => {
    wrapper = shallowMount(Step4, {
      mocks: {
        $UserApi: {
          getUserActivateStatus: mockGetUserActivateStatus
        }
      }
    })
    jest.useFakeTimers()
  })

  it("activates status every 8secs", async () => {
    jest.advanceTimersByTime(9000)
    expect(mockGetUserActivateStatus).toHaveBeenCalled()
  })
})

【问题讨论】：

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

【解决方案1】：

Jest 的 Timer Mocks 将 setInterval 等原生计时器功能替换为自己的可控制版本。

您的问题是您告诉 Jest 在创建和安装组件之后替换这些功能。由于您在组件的 created 挂钩中使用了 setInterval，因此仍将使用真实版本。

将jest.useFakeTimers() 移动到beforeEach 设置函数的顶部

beforeEach(() => {
  jest.useFakeTimers()

  wrapper = shallowMount(Step4, {
    mocks: {
      $UserApi: {
        getUserActivateStatus: mockGetUserActivateStatus
      }
    }
  })
})

【讨论】：