Write JSX as Svelte snippets for testing.
npm install -D svelte-jsx-snippettsconfig.json
{
"compilerOptions": {
// set jsx config
"jsx": "preserve",
"jsxImportSource": "svelte-jsx-snippet",
},
// include jsx/tsx files
"include": ["**/*.svelte", "**/*.ts", "**/*.tsx"],
}vite.config.ts
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
// Put svelteJsxSnippet plugin
import { svelteJsxSnippet } from "svelte-jsx-snippet/vite";
export default defineConfig({
plugins: [sveltekit(), svelteJsxSnippet()],
});For example: MyComponent.svelte
<script>
const { children } = $props();
</script>
<section>{@render children}</section>import MyComponent from "./MyComponent.svelte";
export default {
component: MyComponent,
};
export const Default = {
props: {
children: <h1 class="text-xl font-bold">Hello, World!</h1>,
},
};import { test, expect } from "vitest";
import { render } from "@testing-library/svelte";
import MyComponent from "./MyComponent.svelte";
test("render snippet ", () => {
const { getByText } = render(MyComponent, {
props: {
children: <h1 class="text-xl font-bold">Hello, World!</h1>,
},
});
expect(getByText("Hello, World!")).toBeInTheDocument();
});- Support only Svelte5
- because Snippet is a feature of Svelte5.
- You can't use Svelte's special syntax.
- For example,
#if,#each,#await, etc.
- For example,
MIT