Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svelte-check error in unit-test when we have required props in a Svelte 5 component #2715

Open
pauldiacu opened this issue Mar 13, 2025 · 1 comment
Labels
awaiting submitter bug Something isn't working

Comments

@pauldiacu
Copy link

pauldiacu commented Mar 13, 2025

Describe the bug

When you're creating unit-tests for a Svelte 5 component, using Vitest (latest versions of all packages), if you have required properties in the component, they won't be validated by the check and an error will be thrown.

Reproduction

Let's say we have an interface like this:

export interface ComponentProps {
  name: string;
  surname?: string;
  ref?: HTMLElement | null;
  above?: Snippet;
  [key: string]: any;
}

Notice that the name property is required.

Using this interface into the Svelte 5 component:

let {
    name,
    surname,
    above,
    ...rest
  }: ComponentProps = $props();

Then we have the unit-test (using Vitest):

it("should contain the `some-class` class", () => {
      const {component} = render(MyComponent, {
        props: {
          name: "Name"
        }
      });

      ...
    });

In the test, we'll have a check error saying that:
TS2345: Argument of type Component<ComponentProps, {}, ""> is not assignable to parameter of type Component<{}, {}, string> Types of parameters props and props are incompatible. Property name is missing in type {} but required in type ComponentProps types.ts(70, 3): name is declared here.

Expected behaviour

There should be no check error on this, since the required prop is already being sent within the unit test and the test passes.

System Info

  • OS: Windows
  • IDE: WebStorm, VSCode

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

Image

I've tried something like this, inside the component, using ComponentProps as type for the $props, but it didn't help:
type ComponentProps = Pick<InterfaceProps, 'name'> & Partial<Omit<InterfaceProps, 'name'>>;

Because of this issue, I always need to destruct the props this way:

let {
    name,
    surname,
    above,
    ...rest
  }: Partial<ComponentProps> = $props();

This result in having all props as optional and a validation is needed each time you want to use a required prop.

@pauldiacu pauldiacu added the bug Something isn't working label Mar 13, 2025
@jasonlyu123
Copy link
Member

Please provide a reproduction repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting submitter bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants