Testing passing children

[aqeelat]

Given this component:

<script lang="ts">
	let { children, ...props } = $props();
</script>

<button {...props}>
	{@render children?.()}
</button>

How can I test that children are being rendered?

I tried:

import { describe, expect, it, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { Button } from './index';

describe('Button Component', () => {
	it('should render children text from default slot', () => {
		const withChildren = render(Button, { children: () => 'Click me' });
		const withoutChildren = render(Button, { children: () => '' });

		expect(withChildren.container.innerHTML).not.toBe(withoutChildren.container.innerHTML);
		expect(withChildren.container.textContent).toContain('Click me');
	});
});

but the first assertion fails with this error:

AssertionError: expected '<button><!----></button>' not to be '<button><!----></button>' // Object.is equality

I tried also not making the children as arrow functions in the test (render(Button, { children: 'Click me' });), but then I get TypeError: snippet2 is not a function

[jprinaldi]

This is what worked for me:

import { createRawSnippet } from 'svelte';
import { describe, it, expect } from 'vitest';
import { render } from 'vitest-browser-svelte';
import Button from './button.svelte';

describe('Button', () => {
	it('should render its children', () => {
		const label = 'Click me';
		const children = createRawSnippet(() => ({
			render: () => label
		}));
		const screen = render(Button, { children });
		expect(screen.getByRole('button', { name: label })).toBeVisible();
	});
});

[mcous]

@aqeelat the svelte-testing-library docs have examples for testing snippets. They should be pretty easily adaptable to vitest-browser-svelte

The createRawSnippet approach @jprinaldi posted is one that works well

[sheremet-va]

I have plans to add vitest-browser-* libraries to Vitest docs. Could we borrow the examples from svelte-testing-library?

[mcous]

Yeah of course; let me know if I can help out with that!

I'd also been thinking that it might be nice to drop the (adapted) examples into this repo so that, like in the testing-library repo, the examples can be run as part of the test suite