jest-svelte-events

Custom Jest matchers to test Svelte events

Table of Contents

• Installation
  • Babel
• Usage
  • listen
  • toHaveFiredEvent
  • toHaveFiredEvents
  • toHaveFiredEventsInOrder
  • toHaveFiredEventTimes
  • toHaveFiredEventWith
  • toHaveFiredLastEventWith
  • toHaveFiredNthEventWith
• Contributions
• LICENSE

Installation

This library has peerDependencies listings for svelte >= 3.

npm install svelte-jester jest-svelte-events -D

Add the following to your Jest config

{    
  "setupFilesAfterEnv": [
    "jest-svelte-events/extend-expect"
  ],
  "transform": {
    "^.+\\.svelte$": "svelte-jester"
  },
  "moduleFileExtensions": [
    "js",
    "svelte"
  ]
}

Babel

If you’re using Babel then also add the following

npm install @babel/core @babel/preset-env babel-jest -D

Add the following to your Jest config

"transform": {
  "^.+\\.js$": "babel-jest",
  "^.+\\.svelte$": "svelte-jester"
}

Create a .babelrc and add the following

{
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

Usage

listen

This is a global function called to setup any listeners on the component, you must call this before any
matchers. Listeners are destroyed after each test block.

listen(component: SvelteComponent, event: string | string[])

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  // If you're not using testing-library/svelte.
  // const component = new MyComponent()
  listen(component, 'myEvent')
  // Multiple listeners
  listen(component, ['eventOne', 'eventTwo'])
})

toHaveFiredEvent

Check whether a event has fired.

toHaveFiredEvent(event: string)

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, 'myEvent')
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredEvent('myEvent')
})

toHaveFiredEvents

Check whether multiple events have fired.

toHaveFiredEvent(events: string[])

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, ['eventOne', 'eventTwo'])
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredEvents(['eventOne', 'eventTwo'])
})

toHaveFiredEventsInOrder

Check whether all the events were fired in matching order.

toHaveFiredEventsInOrder(events: string[])

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, ['eventOne', 'eventTwo'])
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredEventsInOrder(['eventTwo', 'eventOne', 'eventTwo'])
})

toHaveFiredEventTimes

Check whether a event was fired a set number of times.

toHaveFiredEventsInOrder(event: string, times: number)

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, 'myEvent')
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredEventTimes('myEvent', 1)
})

toHaveFiredEventWith

Check whether a event was fired with a specific value.

toHaveFiredEventWith(event: string, payload: any)

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, 'myEvent')
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredEventWith('myEvent', 100)
})

toHaveFiredLastEventWith

Check whether the last event was fired with a specific value.

toHaveFiredLastEventWith(payload: any)

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, ['eventOne', 'eventTwo', 'eventThree'])
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredLastEventWith('end')
})

toHaveFiredNthEventWith

Check whether the nth event was fired with a specific value.

toHaveFiredNthEventWith(n: number, payload: any)

import { render } from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'
test('', () => {
  const { component } = render(MyComponent)
  listen(component, ['eventOne', 'eventTwo', 'eventThree'])
  // ...
  // code ...
  // ...
  expect(component).toHaveFiredNthEventWith(1, 'start')
})

Contributions

All contributions are encouraged and welcome! If you have any ideas then just open an
issue.

LICENSE

MIT