svelte-jsx

jsx for svelte to simplify testing

If your are not using babel take a look at svelte-htm.

What?

Write svelte components in jsx.

Why?

This is especially useful for testing svelte components.

Installation

npm install --save-dev svelte-jsx

Babel Configuration

This packages allows to use svelte with jsx (see @babel/plugin-transform-react-jsx). A working babel setup is therefore required.

In your babel configuration file add:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic", "importSource": "svelte-jsx" }]
  ]
}

Or if you already use @babel/preset-react make sure runtime is set to automatic:

{
  "presets": [["@babel/preset-react", { "runtime": "automatic", "importSource": "svelte-jsx" }]]
}

If it not an option to use svelte-jsx as an importSource globally for the project, it is possible to use the @jsxImportSource pragma within a file:

/** @jsxImportSource svelte-jsx */

render(
  <SomeComponent>
    <SomeChild />
  </SomeComponent>,
)

Usage

Please note the differences to svelte component syntax outlined below.

import { render, fireEvent } from '@testing-library/svelte'

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

test('should render', async () => {
  let clicked = 0
  const { getByRole } = render(<Button on_click={() => (clicked += 1)}>Click Me!</Button>)

  const button = getByRole('button')

  await fireEvent.click(button)

  expect(clicked).toBe(1)
})

API

jsx currently does not allow to use : in attribute/property names. As a workaround every : can be replaced be _ (for example bind_value is converted to bind:value for svelte). For event listeners we support the standard jsx naming convention onEventname (this is converted to on:eventname in svelte) as well.

For the sake of best compatibility we convert the className attribute to class for svelte.

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(<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'
  
  const Div = <div use_action={(node) => action(node, parameters)}></div>

Related Projects

• svelte-htm - Hyperscript Tagged Markup for svelte; a jsx-like syntax using Tagged Templates
• svelte-hyperscript - the core of this implementation
• svelte-fragment-component - a utility component
• @testing-library/svelte - helps to test UI components in a user-centric way
• reactjs/rfcs/0000-create-element-changes

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-jsx is open source software licensed as MIT.