https://github.com/ssssota/svelte-jsx-snippet

Write JSX as Svelte snippets for testing.
https://github.com/ssssota/svelte-jsx-snippet

jsx svelte testing

Last synced: about 2 months ago
JSON representation

Write JSX as Svelte snippets for testing.

• Host: GitHub
• URL: https://github.com/ssssota/svelte-jsx-snippet
• Owner: ssssota
• License: other
• Created: 2024-05-05T07:24:19.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-07-24T15:57:23.000Z (5 months ago)
• Last Synced: 2024-10-11T12:15:10.082Z (3 months ago)
• Topics: jsx, svelte, testing
• Language: TypeScript
• Homepage: https://ssssota.github.io/svelte-jsx-snippet/
• Size: 406 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-jsx-snippet

Write JSX as Svelte snippets for testing.

## Setup

```sh

npm install -D svelte-jsx-snippet

```

tsconfig.json

```jsonc

{

  "compilerOptions": {

    // set jsx config

    "jsx": "preserve",

    "jsxImportSource": "svelte-jsx-snippet",

  },

  // include jsx/tsx files

  "include": ["**/*.svelte", "**/*.ts", "**/*.tsx"],

}

```

vite.config.ts

```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()],

});

```

## Usage

For example: `MyComponent.svelte`

```svelte

  const { children } = $props();

{@render children}

```

### For Storybook

```jsx

import MyComponent from "./MyComponent.svelte";

export default {

  component: MyComponent,

};

export const Default = {

  props: {

    children: 
Hello, World!
,

  },

};

```


### For Vitest

```jsx

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: 
Hello, World!
,

    },

  });

  expect(getByText("Hello, World!")).toBeInTheDocument();

});

```


## Constraints

- Support only Svelte5

  - because Snippet is a feature of Svelte5.

- You can't use Svelte's special syntax.

  - For example, `#if`, `#each`, `#await`, etc.

## License

MIT