javascript / intermediate
Snippet
Testen asynchroner gedrosselter Composables mit Fake-Timern in Vitest
Das Unit-Testen von Composables, die von setTimeout oder asynchronen Debounce-Mechanismen abhängen, erfordert eine deterministische Zeitsteuerung. Die Verwendung von Fake-Timern in Vitest (vi.useFakeTimers und vi.advanceTimersByTime) ermöglicht die Überprüfung von Zwischen- und Endzuständen über präzise Millisekundenschwellen, ohne echte Verzögerungen in die Testsuite einzubauen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';import { ref } from 'vue';import { useDebouncedFilter } from './useDebouncedFilter';describe('useDebouncedFilter', () => {beforeEach(() => {vi.useFakeTimers();});afterEach(() => {vi.restoreAllMocks();});it('delays updating filter output until debounce delay elapses', () => {const source = ref('initial');const { debouncedValue } = useDebouncedFilter(source, 300);expect(debouncedValue.value).toBe('initial');source.value = 'updated-query';expect(debouncedValue.value).toBe('initial');vi.advanceTimersByTime(299);expect(debouncedValue.value).toBe('initial');vi.advanceTimersByTime(1);expect(debouncedValue.value).toBe('updated-query');});});
vue
Erklärung
1
vi.useFakeTimers();
Ersetzt die globalen JavaScript-Timer-Funktionen durch synchrone Mock-Implementierungen.
2
source.value = 'updated-query';
Verändert das reaktive Ref, um den internen Debounce-Timer im Composable auszulösen.
3
vi.advanceTimersByTime(1);
Simuliert exakt verstrichene Zeit, um das 300ms-Fenster abzuschließen und die Reaktivität auszulösen.