From 3a6cd67b3b68b7fdfde5a199f6a15a96255f96cc Mon Sep 17 00:00:00 2001 From: Michael Cousins Date: Tue, 30 Jan 2024 10:39:10 +1100 Subject: [PATCH 1/3] test: add onMount test and replace onDestory test --- src/__tests__/fixtures/Mounter.svelte | 11 +++++++ src/__tests__/fixtures/Stopwatch.svelte | 40 ------------------------- src/__tests__/mount.test.js | 33 ++++++++++++++++++++ src/__tests__/unmount.test.js | 35 ---------------------- vite.config.js | 9 ++++-- 5 files changed, 51 insertions(+), 77 deletions(-) create mode 100644 src/__tests__/fixtures/Mounter.svelte delete mode 100644 src/__tests__/fixtures/Stopwatch.svelte create mode 100644 src/__tests__/mount.test.js delete mode 100644 src/__tests__/unmount.test.js diff --git a/src/__tests__/fixtures/Mounter.svelte b/src/__tests__/fixtures/Mounter.svelte new file mode 100644 index 0000000..477bb34 --- /dev/null +++ b/src/__tests__/fixtures/Mounter.svelte @@ -0,0 +1,11 @@ + + + - - diff --git a/src/__tests__/mount.test.js b/src/__tests__/mount.test.js new file mode 100644 index 0000000..830b513 --- /dev/null +++ b/src/__tests__/mount.test.js @@ -0,0 +1,33 @@ +import { describe, expect, test, vi } from 'vitest' + +import { act, render, screen } from '..' +import Mounter from './fixtures/Mounter.svelte' + +describe('mount and destroy', () => { + const handleMount = vi.fn() + const handleDestroy = vi.fn() + + test('component is mounted', async () => { + await act(() => { + render(Mounter, { onMounted: handleMount, onDestroyed: handleDestroy }) + }) + + const content = screen.getByRole('button') + + expect(handleMount).toHaveBeenCalledOnce() + expect(content).toBeInTheDocument() + }) + + test('component is destroyed', async () => { + const { unmount } = render(Mounter, { + onMounted: handleMount, + onDestroyed: handleDestroy, + }) + + await act(() => unmount()) + const content = screen.queryByRole('button') + + expect(handleDestroy).toHaveBeenCalledOnce() + expect(content).not.toBeInTheDocument() + }) +}) diff --git a/src/__tests__/unmount.test.js b/src/__tests__/unmount.test.js deleted file mode 100644 index 86a29dd..0000000 --- a/src/__tests__/unmount.test.js +++ /dev/null @@ -1,35 +0,0 @@ -import { describe, expect, test, vi } from 'vitest' - -import { act, fireEvent, render } from '..' -import Stopwatch from './fixtures/Stopwatch.svelte' - -describe('unmount', () => { - test('unmounts component successfully', async () => { - console.warn = vi.fn() - - const { unmount, getByText, container } = render(Stopwatch) - - await fireEvent.click(getByText('Start')) - - unmount() - - // Hey there reader! You don't need to have an assertion like this one - // this is just me making sure that the unmount function works. - // You don't need to do this in your apps. Just rely on the fact that this works. - expect(container.innerHTML).toBe('
') - - await act() - expect(console.warn).not.toHaveBeenCalled() - }) - - test('destroying component directly and calling unmount does not log warning', async () => { - console.warn = vi.fn() - - const { unmount, component } = render(Stopwatch) - - component.$destroy() - unmount() - - expect(console.warn).not.toHaveBeenCalled() - }) -}) diff --git a/vite.config.js b/vite.config.js index f261029..3866be4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,14 +2,19 @@ import { svelte } from '@sveltejs/vite-plugin-svelte' import { defineConfig } from 'vite' // https://vitejs.dev/config/ -export default defineConfig({ +export default defineConfig(({ mode }) => ({ plugins: [svelte()], + resolve: { + conditions: mode === 'test' ? ['browser'] : [], + }, test: { environment: 'jsdom', setupFiles: ['./src/__tests__/_vitest-setup.js'], + mockReset: true, + unstubGlobals: true, coverage: { provider: 'v8', include: ['src'], }, }, -}) +})) From 2c5cb45dbabda0f0cff2959716037d6b22a38f0c Mon Sep 17 00:00:00 2001 From: Michael Cousins Date: Wed, 31 Jan 2024 07:36:54 +1100 Subject: [PATCH 2/3] fixup: address review feedback --- vite.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/vite.config.js b/vite.config.js index 3866be4..0160228 100644 --- a/vite.config.js +++ b/vite.config.js @@ -5,6 +5,10 @@ import { defineConfig } from 'vite' export default defineConfig(({ mode }) => ({ plugins: [svelte()], resolve: { + // Ensure `browser` exports are used in tests + // Vitest prefers the `node` condition by default + // Svelte's `node` export is its SSR bundle, which does not have onMount + // https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331 conditions: mode === 'test' ? ['browser'] : [], }, test: { From e67c1c342e4b2cc17394480eb4928d9b6d5ba60d Mon Sep 17 00:00:00 2001 From: Michael Cousins Date: Wed, 31 Jan 2024 07:38:15 +1100 Subject: [PATCH 3/3] fixup: tweak --- vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 0160228..4baf76f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -6,7 +6,7 @@ export default defineConfig(({ mode }) => ({ plugins: [svelte()], resolve: { // Ensure `browser` exports are used in tests - // Vitest prefers the `node` condition by default + // Vitest prefers modules' `node` export by default // Svelte's `node` export is its SSR bundle, which does not have onMount // https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331 conditions: mode === 'test' ? ['browser'] : [],