Feature Request: built in function to check if a snippet is rendered

[AntonioVentilii]

Hello,

Is there a way to render a component, set the test conditions and then call something like expect(RenderedComponent).toRenderSnippet(...) or .not.toRenderSnippet(...)?

For example

it('should render the snippet if conditions are met', async () => {
                // this would be a new functions that auto-fills the children/props that are Snippet for example
		const {renderedComponent} = renderWithMockedSnippets(MyComponent);
		
                 // here the consumer sets the conditions to render the snippet (if it is conditional)
                ........

		expect(renderedComponent).toHaveSnippet(...)
})

[mcous]

I recommend the approach outlined in the docs for testing slots

1. Create a wrapper component around your component under test, passing all non-snippet props along
2. In the wrapper component, set the snippet to a DOM element with a data-testid attribute
3. Render the wrapper component, setting or updating the props as necessary to render (or hide) the snippet
4. Check if getByTestId('your-snippet-test-id') is in the document or not

Snippets are hard to create generic fixtures for, due to fundamental limitations with how Svelte works, so (for the time being) the best approach is "one wrapper component per test," unfortunately.

In terms of adding new methods to expect - that's outside the scope of the @testing-library/svelte library. You can add your own - see the vitest docs - or check out testing-library/jest-dom if you're curious to see how they do it

[mcous]

Going to close this issue since I think it's better solved in user-land right now. If you come up with any interesting, generalizable strategies in your test suite, feel free to open a new issue with a more specific proposal!