Astro Info

Astro                    v5.17.3
Node                     v22.14.0
System                   macOS (arm64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Hello! Let me start by saying that I tried reporting this issue in @testing-library/svelte first (testing-library/svelte-testing-library#476) and they send me here 🙂

I'm trying to set up Svelte with unit tests in my existing Astro project, and I'm getting type errors on calls of the render function in my Svelte unit tests that comes from @testing-library/svelte. I use both astro check and sv check to ensure my project has no type errors in all components. Both checkers run against my *.svelte.test.ts files and they expect the imported Svelte components to have different types.

I created this simple reproduction project: https://github.com/angelikatyborska/astro-svelte-testing-library-ts-error

To reproduce the bug:

1. Clone https://github.com/angelikatyborska/astro-svelte-testing-library-ts-error
2. run pnpm install (also works with npm)
3. run pnpm test to prove that tests were set up correctly
4. run pnpm check:astro to run Astro's typechecks (astro check) (after attempting fixes, also run pnpm check:svelte to check that it works with both tools)

The output contains this type error three times:

src/components/SvelteTest/SvelteTest.svelte.test.ts:21:47 - error ts(2345): Argument of type '(_props: PropsWithClientDirectives<Record<string, never>>) => any' is not assignable to parameter of type 'ComponentImport<SvelteComponent<any, any, any> | Component<any, any, string>>'.
  Type '(_props: PropsWithClientDirectives<Record<string, never>>) => any' is not assignable to type 'Component<any, any, string>'.
    Types of parameters '_props' and 'internals' are incompatible.
      Type 'Brand<"ComponentInternals">' has no properties in common with type 'PropsWithClientDirectives<Record<string, never>>'.

21     const { getByText, queryByText } = render(SvelteTest);

I think Astro might be overwriting types of *.svelte modules somehow? I saw this file in my node_modules:

I came up with this workaround where I create a helper function for rendering Svelte components in tests and let it accept both types:

import type { Component as SvelteComponent} from "svelte";
import type { PropsWithClientDirectives } from "@astrojs/svelte/svelte-shims.d.ts";
import { render as renderSvelte } from "@testing-library/svelte";

type SvelteComponentAsDefinedInAstroOrSvelte<Props extends Record<string, any>> = ((_props: PropsWithClientDirectives<Props>) => any) | SvelteComponent<Props, any, any>

export const renderSvelteComponent = <Props extends Record<string, any>>(Component: SvelteComponentAsDefinedInAstroOrSvelte<Props>, props: Props) => {
  const _Component = Component as SvelteComponent<Props, any, any>
  return renderSvelte(_Component, props);
};

However, this feels very hacky and I'm not sure why this is necessary.

Should astro check even validate svelte.test.ts files? Should Astro be redefining types of Svelte modules? I'm not really sure what's going on and why, but I wanted to report this because I think more people might run into this issue.

What's the expected result?

It should be possible to set up Svelte with component unit tests in an Astro project without getting typescript errors. All steps necessary to correctly set up Svelte in an Astro project should be documented in Astro's documentation.

Link to Minimal Reproducible Example

https://github.com/angelikatyborska/astro-svelte-testing-library-ts-error

Participation

• I am willing to submit a pull request for this issue.