jest-svelte-events
Custom Jest matchers to test Svelte events
Table of Contents
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 )
listen ( component , ' myEvent ' )
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 ' )
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 ' ] )
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 ' ] )
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 ' )
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 ' )
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 ' ] )
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 ' ] )
expect ( component ) . toHaveFiredNthEventWith ( 1 , ' start ' )
} )
Contributions
All contributions are encouraged and welcome! If you have any ideas then just open an
issue.
LICENSE
MIT