svelte-htm

> Hyperscript Tagged Markup for svelte to simplify testing



> If your are already using babel take a look at [svelte-jsx].

What?

Write svelte components in [jsx]-like syntax in Standard JavaScript [Tagged Templates] which works in [all modern browsers] and in node.

Why?

This is especially useful for testing svelte components.

Installation

``sh
npm install --save-dev svelte-htm
`

And then import it:

`js
// using es modules
import html from 'svelte-htm';

// common.js
const html = require('svelte-htm');
`

Alternatively use UNPKG or jsDelivr packages:

With script tags and globals:

`html




`

Hotlinking from unpkg: _(no build tool needed!)_

`js
import html from 'https://unpkg.com/svelte-htm?module';
`

Usage

`js
import {render, fireEvent} from '@testing-library/svelte';
import html from 'svelte-htm';

import Button from '../src/Button.svelte';

test('should render', async () => {
let clicked = 0;
const {getByRole} = render(html<${Button} on:click=${() => (clicked += 1)}>Click Me!);

const button = getByRole('button');

await fireEvent.click(button);

expect(clicked).toBe(1);
});
`

API

We aim to support all svelte features. In some cases this is not possible. For those cases we provided feasible workarounds. See [svelte-hyperscript] for further details.

Some notable differences are:

- Using stores to allow reactivity

`js
import {render} from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import {writable, get} from 'svelte/store';

test('write into an input', async () => {
const text = writable();
const {getByRole} = render(html);

const input = getByRole('textbox');

await userEvent.type(input, 'some text');

expect(get(text)).toBe('some text');
});
`

- Action properties lack the possibility to pass parameters to the action

`js
import action from 'some-action-module';

html

- npm test: Run test suite
- npm run build: Generate bundles
- npm run lint: Lints code

NPM Statistics

![NPM](https://nodei.co/npm/svelte-htm/)

License

svelte-htm` is open source software licensed as MIT.

[tagged templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates
[all modern browsers]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Browser_compatibility
[jsx]: https://reactjs.org/docs/introducing-jsx.html
[svelte-jsx]: https://www.npmjs.com/package/svelte-jsx
[svelte-hyperscript]: https://www.npmjs.com/package/svelte-hyperscript
[svelte-fragment-component]: https://www.npmjs.com/package/svelte-fragment-component

UPDATED TO SVELTE4

This package is originally written by kenoxa (Sascha Tandel). I edited personally to be using Svelte v4 since non updated was published yet.