Chore: autocleanup

src/lib/components/FloatingArrow/FloatingArrow.test.svelte.ts

@@ -1,13 +1,11 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { screen, cleanup, render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { screen, render } from '@testing-library/svelte/svelte5';
 import { withEffect } from '$lib/utils/test.svelte.js';
 
 import FloatingArrow from './FloatingArrow.svelte';
 import { useFloating } from '$lib/hooks/useFloating/index.svelte.js';
 
 describe('FloatingArrow', () => {
-	afterEach(() => cleanup());
-
 	it(
 		'renders the component to default props',
 		withEffect(() => {

src/lib/hooks/useClick/index.test.svelte.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/svelte';
+import { fireEvent, render, screen } from '@testing-library/svelte/svelte5';
 import App from './App.test.svelte';
 
 describe('useClick', () => {
@@ -26,8 +26,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 		it('disables the hook when `enabled` is `false`', async () => {
 			render(App, { enabled: false });
@@ -39,8 +37,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 	});
 
@@ -55,8 +51,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 
 		it('opens on click when `event` is set to `click`', async () => {
@@ -69,8 +63,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 
 		it('opens on mousedown when `event` is set to `mousedown`', async () => {
@@ -83,8 +75,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 	});
 
@@ -105,8 +95,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 
 		it('when set to `true` changes `open` state to both `true` and `false`', async () => {
@@ -125,8 +113,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 
 		it('when set to `true` changes `open` state to `false` when `open` is initially set to `true`', async () => {
@@ -139,8 +125,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 
 		it('when set to `false` changes `open` state to `true` and not back to `false`', async () => {
@@ -159,8 +143,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 		it('when set to `false` does not change `open` state back to `false` when `open` is initially set to `true`', async () => {
 			render(App, { toggle: false, open: true });
@@ -172,8 +154,6 @@ describe('useClick', () => {
 			await vi.waitFor(() => {
 				expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 			});
-
-			cleanup();
 		});
 	});
 
@@ -184,8 +164,6 @@ describe('useClick', () => {
 			await fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' });
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 
 		it('when set to `true` returns a `Space` keyup event handler', async () => {
@@ -195,8 +173,6 @@ describe('useClick', () => {
 			await fireEvent.keyUp(screen.getByRole('button'), { key: ' ' });
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 
 		it('when applied to a typable reference does not return a `Space` key event handler', async () => {
@@ -206,8 +182,6 @@ describe('useClick', () => {
 			await fireEvent.keyUp(screen.getByRole('button'), { key: ' ' });
 
 			expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-
-			cleanup();
 		});
 
 		it('when applied to a typable reference does not return a `Enter` key event handler', async () => {
@@ -216,8 +190,6 @@ describe('useClick', () => {
 			await fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' });
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 	});
 	it('does not change `open` state to `false` on mouseleave when paired with `useHover`', async () => {
@@ -228,7 +200,5 @@ describe('useClick', () => {
 		await fireEvent.mouseLeave(screen.getByRole('button'));
 
 		expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-		cleanup();
 	});
 });

src/lib/hooks/useHover/index.test.svelte.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup, act } from '@testing-library/svelte';
+import { render, screen, fireEvent, act } from '@testing-library/svelte/svelte5';
 import App from './App.test.svelte';
 
 vi.useFakeTimers();
@@ -10,8 +10,6 @@ describe('useHover', () => {
 
 		await fireEvent.mouseEnter(screen.getByRole('button'));
 		expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-		cleanup();
 	});
 
 	it('closes on mouseleave', async () => {
@@ -20,8 +18,6 @@ describe('useHover', () => {
 		await fireEvent.mouseEnter(screen.getByRole('button'));
 		await fireEvent.mouseLeave(screen.getByRole('button'));
 		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-
-		cleanup();
 	});
 
 	describe('delay', () => {
@@ -41,8 +37,6 @@ describe('useHover', () => {
 			});
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 		it('delays only open when only open is provided a value', async () => {
 			render(App, { delay: { open: 100 } });
@@ -60,8 +54,6 @@ describe('useHover', () => {
 			});
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 		it('delays only close when only close is provided a value', async () => {
 			render(App, { delay: { close: 100 } });
@@ -80,8 +72,6 @@ describe('useHover', () => {
 			});
 
 			expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-
-			cleanup();
 		});
 	});
 
@@ -110,8 +100,6 @@ describe('useHover', () => {
 			});
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 
 		it('restMs + nullish open delay should respect restMs', async () => {
@@ -128,8 +116,6 @@ describe('useHover', () => {
 			await act(async () => {
 				vi.advanceTimersByTime(1);
 			});
-
-			cleanup();
 		});
 
 		it.skip('ignores restMs on touch pointers', async () => {
@@ -141,8 +127,6 @@ describe('useHover', () => {
 			await act(async () => {});
 
 			expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-
-			cleanup();
 		});
 
 		it('ignores restMs on touch pointers when mouseOnly is true ', async () => {
@@ -154,8 +138,6 @@ describe('useHover', () => {
 			await act(async () => {});
 
 			expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-
-			cleanup();
 		});
 	});
 
@@ -174,7 +156,5 @@ describe('useHover', () => {
 		});
 
 		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-
-		cleanup();
 	});
 });

src/lib/hooks/useRole/index.test.svelte.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/svelte';
+import { render, screen } from '@testing-library/svelte/svelte5';
 import App from './App.test.svelte';
 
 const ARIA_ROLES = ['grid', 'listbox', 'menu', 'tree', 'tooltip', 'alertdialog', 'dialog'] as const;
@@ -8,14 +8,12 @@ describe('useRole', () => {
 	it('by default applies the "dialog" role to the floating element', () => {
 		render(App, { role: undefined, open: true });
 		expect(screen.queryByRole('dialog')).toBeInTheDocument();
-		cleanup();
 	});
 
 	for (const role of ARIA_ROLES) {
 		it(`applies the "${role}" role to the floating element`, () => {
 			render(App, { role, open: true });
 			expect(screen.queryByRole(role)).toBeInTheDocument();
-			cleanup();
 		});
 	}
 
@@ -31,8 +29,6 @@ describe('useRole', () => {
 			await rerender({ role: 'tooltip', open: false });
 
 			expect(screen.getByRole('buton')).not.toHaveAttribute('aria-describedby');
-
-			cleanup();
 		});
 	});
 
@@ -48,8 +44,6 @@ describe('useRole', () => {
 			await rerender({ role: 'tooltip', open: false });
 
 			expect(screen.getByRole('buton')).not.toHaveAttribute('aria-labelledby');
-
-			cleanup();
 		});
 	});
 

src/vitest.setup.ts

@@ -0,0 +1,15 @@
+/**
+ * Injects additional jest matchers, see: https://testing-library.com/docs/svelte-testing-library/setup#vitest
+ */
+import '@testing-library/jest-dom/vitest';
+
+/**
+ * Injects a global afterEach to cleanup, see: https://testing-library.com/docs/svelte-testing-library/api#cleanup
+ */
+import { afterEach } from 'vitest';
+import { act, cleanup } from '@testing-library/svelte/svelte5';
+
+afterEach(async () => {
+	await act();
+	cleanup();
+});

vite.config.ts

@@ -6,14 +6,11 @@ export default defineConfig({
 	plugins: [sveltekit(), svelteTesting()],
 	test: {
 		include: ['./src/lib/**/*.{test,test.svelte}.{js,ts}'],
-		setupFiles: ['./src/vitest-setup.js'],
+		setupFiles: ['./src/vitest.setup.ts'],
 		environment: 'jsdom',
 		coverage: {
 			reporter: ['html', 'text'],
 			include: ['./src/lib/**/*.{js,ts}'],
 		},
-		alias: {
-			'@testing-library/svelte': '@testing-library/svelte/svelte5',
-		},
 	},
 });