I'm building a website with Astro together with Svelte. For component tests I added svelte-testing-library which runs fine when being executed with npm test
.
Unfortunately after adding component tests running astro check fails for all calls to render()
with
No overload matches this call. Overload 1 of 2, '(component: Constructor<SvelteComponent<any, any, any>>, componentOptions?: any, renderOptions?: Omit<RenderOptions<typeof import("./node_modules/@testing-library/dom/types/queries")>, "queries"> | undefined): RenderResult<...>', gave the following error. Overload 2 of 2, '(component: Constructor<SvelteComponent<any, any, any>>, componentOptions?: any, renderOptions?: RenderOptions<Queries> | undefined): RenderResult<...>', gave the following error.146 render(Greeter, props) ~~~~~~~~~~~
E.g. a simple test like this fails:
import "@testing-library/svelte/vitest"import "@testing-library/jest-dom/vitest"import { render, screen } from "@testing-library/svelte"import { expect, test } from "vitest"import Greeter from "./greeter.svelte"test('no initial greeting', () => { const props = { name: "World" } render(Greeter, props) const button = screen.getByRole("button") expect(button).toBeInTheDocument()})
greeter.svelte
is a simple Svelte component, taken from the example:
<script> export let name let showGreeting = false const handleClick = () => (showGreeting = true)</script><button on:click="{handleClick}">Greet</button>{#if showGreeting}<p>Hello {name}</p>{/if}
Any ideas on how to fix that?