超时模拟不适用于测试库和 useFakeTimers

Question

我正在开发一个允许在 5 秒后显示模式的 vueJS 组件。该组件按预期运行良好。

<template>
    <vue-modal v-if="showModal" data-testid="modal-testid" />
</template>
<script>
export default {
    name: "TimeoutExample",
    data() {
        return {
          showModal: false,
        }
    },
    mounted() {
        setTimeout(() => this.displayModal(), 5000)
    },
    methods: {
        displayModal: function() {
            this.showModal = true;
        }
    }
};
</script>

我用jest，testing-library实现了单元测试，我想用jest.useFakeTimers模拟超时，但是测试KO

// testing file
describe.only('Vue Component (mobile) 2', () => {
    beforeAll(() => {
      isMobile.mockImplementation(() => true)
    })

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

    afterEach(() => {
      jest.runOnlyPendingTimers()
      jest.useRealTimers()
    })

    it('should render title after `props.delay` milliseconds', () => {
      const { queryByTestId } = myRender({
        localVue: myMakeLocalVue(),
      })

      jest.advanceTimersByTime(5001)

      expect(queryByTestId('modal-testid')).toBeVisible()
    })
})

你知道我如何测试这种行为吗？

Answer 1

删除此 jest.spyOn(global, 'setTimeout')。开玩笑会用useFakeTimers
我想你不能在一个测试用例中使用 async 和 done 回调。您使用哪个版本的 jest？
在 advanceTimersByTime 之后添加 await localVue.$nextTick() 以等待 Vue 应用所有更改

Answer 2

在 waitFor 中调用 advanceTimersByTime 后对我有用。

describe.only('Vue Component (mobile) 2', () => {
    beforeAll(() => {
      isMobile.mockImplementation(() => true)
    })

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

    afterEach(() => {
      jest.runOnlyPendingTimers()
      jest.useRealTimers()
    })

    it('should render title after `props.delay` milliseconds', async () => {
      const { queryByTestId } = myRender({
        localVue: myMakeLocalVue(),
      })

      await waitFor(() => {
        jest.advanceTimersByTime(5001)
      })

      expect(queryByTestId('modal-testid')).toBeVisible()
    })
})

超时模拟不适用于测试库和 useFakeTimers

Timeout simulation not working with testing-library and useFakeTimers

settimeout

vue.js

jestjs

testing-library

usefaketimers