超时模拟不工作与测试库和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，测试库实现了单元测试，我想使用jest。使用efaketimers来模拟超时，但测试是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

1. 删除此jest.spyOn(global, 'setTimeout')。jest将在useFakeTimers
中发挥自己的魔力
2. 我想你不能在一个测试用例中使用async和done回调。你用的是哪个版本的笑话?
3. 在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()
})
})