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..4baf76f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,14 +2,23 @@ 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: { + // Ensure `browser` exports are used in tests + // 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'] : [], + }, test: { environment: 'jsdom', setupFiles: ['./src/__tests__/_vitest-setup.js'], + mockReset: true, + unstubGlobals: true, coverage: { provider: 'v8', include: ['src'], }, }, -}) +}))