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