Skip to content

Typechecks fail when used in an Astro project (argument types in render) #476

@angelikatyborska

Description

@angelikatyborska

Hello! Let me start by saying that I am not sure if I should report this problem here or in Astro. I think the problem might be caused by Astro, but this repository might have more visitors who know workarounds for similar issues. I'm happy to close this one and report it in Astro instead if that's better.

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.

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)

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: https://github.com/withastro/astro/blob/0dd9d00cf8be38c53217426f6b0e155a6f7c2a22/packages/integrations/svelte/svelte-shims.d.ts#L4

I tried adding this to my env.d.ts but it didn't help:

declare module "*.svelte" {
  import type { Component } from "svelte";

  const component: Component;
  export default component;
}

Did anyone experience the same problem? Is this a bug in svelte-testing-library, or in the Astro Svelte integration?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions