invalid_snippet_arguments when rendering snippet using render function from @testing-library/svelte

[axel7083]

Describe the bug

Using vitest, and @testing-library/svelte in our codebase we were testing Snippets in different area using the render function from the testing library (see reproduction).

Recently with #15521 it has been added some extra validation when rendering Snippet. And our CI failed when dependabot tried to update svelte library.

The problem seems to be that the testing library calls the Snippet function with an empty object as argument, and fails at the following part of the code

svelte/packages/svelte/src/internal/client/dev/validation.js

Lines 10 to 14 in e72ac0f

	for (let arg of args) {
	if (typeof arg !== 'function') {
	invalid_snippet_arguments();
	}
	}

Raising an invalid_snippet_arguments error.

Reproduction

Example.svelte

<script module>
  export { add };
</script>

{#snippet add(a, b)}
  {a} + {b} = {a + b}
{/snippet}

example.spec.ts

import '@testing-library/jest-dom/vitest';

import { render } from '@testing-library/svelte';
import { add } from './Example.svelte';
import { test } from 'vitest';

test('render snippet', () => {
  render(add);
});

Logs

Svelte error: invalid_snippet_arguments
A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
https://svelte.dev/e/invalid_snippet_arguments

System Info

all platform (macos, ubuntu, windows)

Severity

blocking an upgrade

[dummdidumm]

AFAIK render is for rendering components, not snippets. Is this even a valid/supported use case for @testing-library/svelte? This error might very well be accurate, and you gotta change how you test your snippets.

[axel7083]

@dummdidumm thanks for your feedback. There is no mention of Svelte Snippets in the @testing-library/svelte library as this is something pretty recent. I post a comment on their svelte5 tracker issue (testing-library/svelte-testing-library#284 (comment))

you gotta change how you test your snippets.

What would be for you the right way to test Snippets in an unitary manner ? The only alternative that I can imagine would be to create a Svelte Wrapper Component. Which would add a lot of code for this testing that was made pretty easy before.

This error might very well be accurate

Technically you are probably right, the error is accurate, the render function provide an empty object ({}) when no props are provided as first argument to the Object (Component or Snippet) provided, the validation see it as an error.

More generally speaking, this echo a lot with #9774 and the Component and Snippet are getting more and more two distinct entities, and it get hard to play with both of them. Especially with the lack of method to tell them appart.

I am not a big fan of #9774 (comment) which is more a hack than an actual solution with long term support.

We have a lot of places in our codebase where we allow either a Snippet or a Component, not being able to render either of them with a single method (E.g. render or html synthax <Component/>) makes it even harder to deal with backward compatibility, slots, and snippets while migrating everything to Svelte5.

[mcous]

Is this even a valid/supported use case for @testing-library/svelte?

@dummdidumm nope, not a valid use-case for @testing-library/svelte. Unfortunate naming overlap, though!

What would be for you the right way to test Snippets in an unitary manner ? The only alternative that I can imagine would be to create a Svelte Wrapper Component.

@axel7083 yes, you probably need a wrapper component. You can create one fixture to use with multiple snippets - see my suggestion in the STL thread you posted in

[axel7083]

Thanks @mcous , just to summarise our discussion in testing-library/svelte-testing-library#284 (comment)

With the current API exposed, it does not seems it is possible to create a generic renderSnippet function. One blocking element being #11178 as being able to spread the arguments in the render option, would allow us to create a generic wrapper.