fix(svelte5): use state rune for rerender

Author: mcous

.eslintrc.cjs

@@ -25,6 +25,7 @@ module.exports = {
       },
       rules: {
         'no-undef-init': 'off',
+        'prefer-const': 'off',
       },
     },
     {
@@ -49,5 +50,6 @@ module.exports = {
     ecmaVersion: 2022,
     sourceType: 'module',
   },
+  globals: { $state: 'readonly', $props: 'readonly' },
   ignorePatterns: ['!/.*'],
 }

src/__tests__/fixtures/Comp.svelte

@@ -13,5 +13,3 @@
 <h1 data-testid="test">Hello {name}!</h1>
 
 <button on:click={handleClick}>{buttonText}</button>
-
-<style></style>

src/__tests__/fixtures/CompRunes.svelte

@@ -0,0 +1,13 @@
+<script>
+  let { name = 'World' } = $props()
+
+  let buttonText = $state('Button')
+
+  function handleClick() {
+    buttonText = 'Button Clicked'
+  }
+</script>
+
+<h1 data-testid="test">Hello {name}!</h1>
+
+<button onclick={handleClick}>{buttonText}</button>

src/__tests__/render.test.js

@@ -1,11 +1,15 @@
 import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
+import { beforeAll, describe, expect, test } from 'vitest'
 
-import Comp from './fixtures/Comp.svelte'
-import { IS_SVELTE_5 } from './utils.js'
+import { COMPONENT_FIXTURES, IS_SVELTE_5 } from './utils.js'
 
-describe('render', () => {
+describe.each(COMPONENT_FIXTURES)('render $name', ({ component }) => {
   const props = { name: 'World' }
+  let Comp
+
+  beforeAll(async () => {
+    Comp = await import(component)
+  })
 
   test('renders component into the document', () => {
     const { getByText } = render(Comp, { props })

src/__tests__/rerender.test.js

@@ -1,10 +1,15 @@
 import { act, render, screen } from '@testing-library/svelte'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-import { describe, expect, test, vi } from 'vitest'
+import { beforeAll, describe, expect, test, vi } from 'vitest'
 
-import Comp from './fixtures/Comp.svelte'
+import { COMPONENT_FIXTURES, IS_SVELTE_5, TYPE_RUNES } from './utils.js'
+
+describe.each(COMPONENT_FIXTURES)('rerender $type', ({ type, component }) => {
+  let Comp
+
+  beforeAll(async () => {
+    Comp = await import(component)
+  })
 
-describe('rerender', () => {
   test('updates props', async () => {
     const { rerender } = render(Comp, { name: 'World' })
     const element = screen.getByText('Hello World!')
@@ -29,13 +34,12 @@ describe('rerender', () => {
     )
   })
 
-  test('change props with accessors', async () => {
-    const { component, getByText } = render(
-      Comp,
-      SVELTE_VERSION < '5'
-        ? { accessors: true, props: { name: 'World' } }
-        : { name: 'World' }
-    )
+  test.skipIf(type === TYPE_RUNES)('change props with accessors', async () => {
+    const componentOptions = IS_SVELTE_5
+      ? { name: 'World' }
+      : { accessors: true, props: { name: 'World' } }
+
+    const { component, getByText } = render(Comp, componentOptions)
     const element = getByText('Hello World!')
 
     expect(element).toBeInTheDocument()

src/__tests__/utils.js

@@ -5,3 +5,14 @@ export const IS_JSDOM = window.navigator.userAgent.includes('jsdom')
 export const IS_HAPPYDOM = !IS_JSDOM // right now it's happy or js
 
 export const IS_SVELTE_5 = SVELTE_VERSION >= '5'
+
+export const TYPE_LEGACY = 'legacy'
+
+export const TYPE_RUNES = 'runes'
+
+export const COMPONENT_FIXTURES = [
+  { type: TYPE_LEGACY, component: './fixtures/Comp.svelte' },
+  IS_SVELTE_5
+    ? { type: TYPE_RUNES, component: './fixtures/CompRunes.svelte' }
+    : [],
+].flat()

src/pure.js

@@ -80,7 +80,8 @@ export class SvelteTestingLibrary {
           )
           props = props.props
         }
-        component.$set(props)
+
+        this.rerenderComponent(component, props)
         await Svelte.tick()
       },
       unmount: () => {
@@ -107,6 +108,10 @@ export class SvelteTestingLibrary {
     return component
   }
 
+  rerenderComponent(component, nextProps) {
+    component.$set(nextProps)
+  }
+
   cleanupComponent(component) {
     const inCache = this.componentCache.delete(component)
 

src/svelte5-index.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/export */
 import { act } from './pure.js'
-import { cleanup } from './svelte5.js'
+import { cleanup } from './svelte5.svelte.js'
 
 // If we're running in a test runner that supports afterEach
 // then we'll automatically run cleanup afterEach test
@@ -20,4 +20,4 @@ export * from '@testing-library/dom'
 // export svelte-specific functions and custom `fireEvent`
 // `fireEvent` must be a named export to take priority over wildcard export above
 export { act, fireEvent } from './pure.js'
-export { cleanup, render } from './svelte5.js'
+export { cleanup, render } from './svelte5.svelte.js'

src/svelte5.js

@@ -0,0 +1,49 @@
+/** eslint-global: $state */
+import { mount, unmount } from 'svelte'
+
+import { SvelteTestingLibrary } from './pure.js'
+
+class Svelte5TestingLibrary extends SvelteTestingLibrary {
+  svelteComponentOptions = [
+    'target',
+    'props',
+    'events',
+    'context',
+    'intro',
+    'recover',
+  ]
+
+  propsByComponent = new Map()
+
+  renderComponent(ComponentConstructor, componentOptions) {
+    const props = $state(componentOptions.props ?? {})
+    const component = mount(ComponentConstructor, {
+      ...componentOptions,
+      props,
+    })
+
+    this.componentCache.add(component)
+    this.propsByComponent.set(component, props)
+
+    return component
+  }
+
+  rerenderComponent(component, nextProps) {
+    const prevProps = this.propsByComponent.get(component)
+    Object.assign(prevProps, nextProps)
+  }
+
+  cleanupComponent(component) {
+    const inCache = this.componentCache.delete(component)
+    this.propsByComponent.delete(component)
+
+    if (inCache) {
+      unmount(component)
+    }
+  }
+}
+
+const instance = new Svelte5TestingLibrary()
+
+export const render = instance.render.bind(instance)
+export const cleanup = instance.cleanup.bind(instance)