svelte-htm
v1.2.0
Published
tagged template syntax for svelte to simplify testing
Downloads
11,314
Maintainers
Readme
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 suitenpm run build
: Generate bundlesnpm run lint
: Lints code
NPM Statistics
License
svelte-htm
is open source software licensed as MIT.