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

Need to update at least Types for Svelte 5 #4

Open
SteveALee opened this issue Dec 29, 2024 · 1 comment
Open

Need to update at least Types for Svelte 5 #4

SteveALee opened this issue Dec 29, 2024 · 1 comment

Comments

@SteveALee
Copy link

SteveALee commented Dec 29, 2024

I'm using with Svelte 5 and fortunately render() works fine (as it uses mount() which appears to be 4 and 5 compatible).

However the types are for Svelte 4 - eg SvelteComponent not Component so I get errors in my code, eg:

Argument of type 'Component<Props, {}, "foo">' is not assignable to parameter of type 'ComponentType<SvelteComponent<Record<string, any>, any, any>>'.
  Type 'Component<Props, {}, "foo">' is not assignable to type 'new (options: ComponentConstructorOptions<Record<string, any>>) => SvelteComponent<Record<string, any>, any, any>'.
    Type 'Component<Props, {}, "foo">' provides no match for the signature 'new (options: ComponentConstructorOptions<Record<string, any>>): SvelteComponent<Record<string, any>, any, any>'.ts(2345)

Somehow need to support both svelte 4 and 5.

Is it possible to provide overriding types in userland as a temp solution?

There may be other problems but my tests have not used anyhting else other than render() so far.

@SteveALee
Copy link
Author

SteveALee commented Dec 29, 2024

Here my example test code (using vitest latest 3 beta)

file: Comp.svelte.test.ts

/// <reference types="@vitest/browser/providers/playwright" />
import { expect, test } from 'vitest'
import { render } from 'vitest-browser-svelte'
import type { ComponentProps } from 'svelte'
import Comp from './Comp.svelte'

test('renders name', async () => {
  let bar = $state({ value: 'world' })

  const props: ComponentProps<typeof Comp> = {
    get foo() {
      return bar.value
    },
    set foo($$value) {
      bar.value = $$value
    }
  }

  const comp = render(Comp, { props })
  await expect.element(comp.getByText('Foo: world')).toBeInTheDocument()
  const buttons = comp.getByRole('button').all()
  await buttons[0].click()
  await expect.element(comp.getByText('foo: hello')).toBeInTheDocument()
  expect(bar.value).toBe('hello')
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant