fix(web/test): mount ToastHost in vitest setup so toast assertions resolve
W-T3 (617477b) consolidated toast rendering into a single <ToastHost />
mounted in +layout.svelte, but page-level tests render components without
the layout, so screen.getByTestId('toast') and role=status queries broke.
Mount ToastHost in beforeEach (auto-cleaned by svelteTesting()) and reset
the store with clearToast() in afterEach so toasts can't leak between
tests.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,8 @@
|
|||||||
import '@testing-library/jest-dom/vitest';
|
import '@testing-library/jest-dom/vitest';
|
||||||
|
import { beforeEach, afterEach } from 'vitest';
|
||||||
|
import { render } from '@testing-library/svelte';
|
||||||
|
import ToastHost from './src/lib/components/ToastHost.svelte';
|
||||||
|
import { clearToast } from './src/lib/stores/toast.svelte';
|
||||||
|
|
||||||
// Node 25 ships a partial localStorage global that lacks getItem/setItem/clear
|
// Node 25 ships a partial localStorage global that lacks getItem/setItem/clear
|
||||||
// unless launched with --localstorage-file. jsdom sees Node's global and skips
|
// unless launched with --localstorage-file. jsdom sees Node's global and skips
|
||||||
@@ -21,3 +25,20 @@ if (typeof window !== 'undefined') {
|
|||||||
Object.defineProperty(window, 'localStorage', { configurable: true, value: memLocal });
|
Object.defineProperty(window, 'localStorage', { configurable: true, value: memLocal });
|
||||||
Object.defineProperty(window, 'sessionStorage', { configurable: true, value: memSession });
|
Object.defineProperty(window, 'sessionStorage', { configurable: true, value: memSession });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// W-T3 moved toast rendering out of per-page markup into a single
|
||||||
|
// <ToastHost /> mounted in +layout.svelte. Tests render individual pages
|
||||||
|
// without the layout, so we mount ToastHost here so `pushToast()` calls
|
||||||
|
// from page code surface in the DOM the same way they do in production.
|
||||||
|
// `render()` from @testing-library/svelte registers auto-cleanup via the
|
||||||
|
// svelteTesting() vite plugin, so the host gets unmounted between tests
|
||||||
|
// alongside whatever component the test itself rendered. clearToast()
|
||||||
|
// resets the module-scope store state so a stale toast from one test
|
||||||
|
// can't leak into another.
|
||||||
|
beforeEach(() => {
|
||||||
|
render(ToastHost);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
clearToast();
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user