超时模拟无法与测试图形和USEFAKETIMERS一起使用

Question

我正在研究VueJS组件，该组件允许在5秒后显示模态。该组件按预期运行良好。

<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

在调用advancetimersbytime内部waitfor之后，它对我有用。

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()
    })
})

Answer 2

1. 删除此jest.spyon（global，'settimeout'）。 Jest将使用usefaketimers我自己的魔术，
2. 我想您不能在一个测试案例中使用async andnc 完成回调。您使用哪个版本的玩笑？
3. 添加等待localvue。$ nextTick（） Advancetimersbytime等待直到VUE应用所有更改