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 package allows you to write Svelte using the jsx syntax (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 you're unable to use svelte-jsx as a global importSource for your project, you may use the @jsxImportSource pragma within a file:

/** @jsxImportSource svelte-jsx */

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

Usage

Please note the differences to the 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

Currently, jsx does not allow the use of : in attribute/property names. As a workaround, every : can be replaced with _ (for example bind_value is converted to bind:value for Svelte).

For Svelte compatibility we convert className to class.

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

• 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 ideas, questions, or if 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.