How to create a higher-order component in Svelte that automatically converts bindable props to Writable props for easier testing?

[rxliuli]

I saw on https://svelte.dev/docs/svelte/testing that if there are bindable props, a component must be created to wrap for testing. Is it possible to implement a higher-order component that automatically converts bindable props into writable props?

A possible usage method is as follows

describe('Input', () => {
  it('should render', () => {
    const value = writable('')
    render(Bindable2Writable, {
      props: {
        component: Input,
        value,
      },
    })
  })
})

How should I implement it? Or how is it done in the community when writing tests for Svelte components?

<script lang="ts" generics="T extends Component">
  import type { Component, Snippet } from 'svelte'

  let {
    component,
    ...props
  }: {
    component: Component<any>
  } & Record<string, any> = $props()

  const bindableProps = $derived(
    Object.entries(props).reduce(
      (acc, [key, value]) => {
        if (
          value &&
          typeof value === 'object' &&
          'subscribe' in value &&
          'set' in value &&
          'update' in value
        ) {
          // TODO how to bind the value from writable?
          acc[`bind:${key}`] = value
        } else {
          acc[key] = value
        }
        return acc
      },
      {} as Record<string, any>,
    ),
  )
</script>

<svelte:component this={component} {...bindableProps} />

[webJose]

One can also use getter/setter to test bindables. See this comment.