Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Can't use flowbite Button into vitest+jsdom?

$
0
0

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?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>