I'm trying to build basic component testing via vitest and jsdom, so I created vitest.config.js
containing:
import { defineConfig } from 'vite';import { svelte } from '@sveltejs/vite-plugin-svelte';import { resolve, dirname } from 'node:path'import { fileURLToPath } from 'node:url'export default defineConfig({ plugins: [svelte()], test: { globals: true, environment: 'jsdom', alias: [ { find: /\$lib/, replacement: resolve(fileURLToPath(dirname(import.meta.url)), '/src/lib'), } ] }});
and then I test this simple component:
<script lang="ts"> import { Button } from 'flowbite-svelte';</script><div><Button> Foo</Button></div>
via:
import { describe, it, expect, test } from 'vitest'import '@testing-library/jest-dom';import { render } from '@testing-library/svelte/svelte5';import Home from './Test.svelte';describe('Basic home rendering', () => { it('renders the home with a proper title', () => { const result = render(Home); const headerText = result.getByText('Foo'); expect(headerText).toBeInTheDocument(); });});
sadly I get an error:
Failed test 1:FAIL src/routes/home.test.js > Basic home rendering > renders the home with a proper titleSvelte error: lifecycle_outside_component`getContext(...)` can only be used during component initialisation❯ Module.lifecycle_outside_component node_modules/svelte/src/internal/shared/errors.js:13:17 12| const error = new Error(`${"lifecycle_… 13| 14| error.name = 'Svelte error'; | ^ 15| throw error; 16| } else {❯ get_or_init_context_map node_modules/svelte/src/internal/server/context.js:58:25❯ Module.getContext node_modules/svelte/src/internal/server/context.js:18:22❯ Button node_modules/flowbite-svelte/dist/buttons/Button.svelte:36:38❯ Object.fn node_modules/svelte/src/internal/client/dev/hmr.js:37:39❯ execute_reaction_fn node_modules/svelte/src/internal/client/runtime.js:289:20❯ Module.execute_effect node_modules/svelte/src/internal/client/runtime.js:456:18❯ create_effect node_modules/svelte/src/internal/client/reactivity/effects.js:78:26❯ Module.branch node_modules/svelte/src/internal/client/reactivity/effects.js:224:9❯ Object.fn node_modules/svelte/src/internal/client/dev/hmr.js:32:35
If I replace Button
with button
, the test works fine. Any idea what I'm missing?