CODEWITHSUNDEEP
typescriptsvelteastrojssvelte-testing-library
fxm90
fxm90

Reputation: 1

Astro fails with svelte-testing-library

I'm building a website using Astro and a Svelte integration. For testing I added svelte-testing-library which runs fine when being executed with npm test.

Unfortunately after adding the 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("/workspaces/workspace/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.

11   render(Greeter, { name: "Luke Skywalker" });
               ~~~~~~~~~~~

I've created a Code Sandbox to repdroduce the issue here. In components/greeter.svelte you can find the Svelte component, and in components/greeter.test.ts you can find the corresponding test.

As npm test runs through fine, I'd expect astro check to also run through without any errors. Any ideas on how to fix the error?

Upvotes: 0

Views: 163

Answers (1)

fxm90
fxm90

Reputation: 1

I finally could resolve the TypeScript errors from astro check:

1. Add a .d.ts file with the same name as the component

E.g. for the Code Sandbox example above the file would be named greeter.d.ts

2. Provide the typings as shown here: TypeScript: SvelteComponent

The content should look something like this:

import { SvelteComponent } from "svelte";

export default class Greeter extends SvelteComponent<{ name: string; }> {}
3. Import the Svelte component without the .svelte file extension inside the test case

Replace import Greeter from "./greeter.svelte" with import Greeter from "./greeter"

Upvotes: 0

Related Questions