Skip to content

kenoxa/svelte-htm

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

svelte-htm

Hyperscript Tagged Markup for svelte to simplify testing

License Latest Release View changelog

CI Coverage Status PRs Welcome Conventional Commits

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

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

NPM

License

svelte-htm is open source software licensed as MIT.