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

npm install --save-dev svelte-htm

And then import it:

// 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:

<!-- UNPKG -->
<script src="https://unpkg.com/svelte-htm"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/svelte-htm"></script>

<script>
  <!-- And then grab it off the global like so: -->
  const html = svelteHtml
</script>

Hotlinking from unpkg: (no build tool needed!)

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

Usage

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

  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`<input bind:value=${text} />`)
  
    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

  import action from 'some-action-module'
  
  html`<div use:action=${(node) => action(node, parameters)}></div>`

Related Projects

• svelte-jsx - write svelte components using jsx
• svelte-hyperscript - the core of this implementation
• svelte-fragment-component - a utility component
• htm - making Hyperscript Tagged Markup possible
• @testing-library/svelte - helps to test UI components in a user-centric way

Support

This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.

Contribute

Thanks for being willing to contribute!

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

We are following the Conventional Commits convention.

Develop

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

NPM Statistics

License

svelte-htm is open source software licensed as MIT.