项目作者: mihar-22

项目描述 :
Custom Jest matchers to test Svelte events.
高级语言: JavaScript
项目地址: git://github.com/mihar-22/jest-svelte-events.git
创建时间: 2019-12-12T02:46:01Z
项目社区:https://github.com/mihar-22/jest-svelte-events

开源协议:MIT License

下载



jest-svelte-events



Custom Jest matchers to test Svelte events



version
MIT License

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

  1. {
  2. "setupFilesAfterEnv": [
  3. "jest-svelte-events/extend-expect"
  4. ],
  5. "transform": {
  6. "^.+\\.svelte$": "svelte-jester"
  7. },
  8. "moduleFileExtensions": [
  9. "js",
  10. "svelte"
  11. ]
  12. }

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

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

Create a .babelrc and add the following

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

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.

  1. listen(component: SvelteComponent, event: string | string[])
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. // If you're not using testing-library/svelte.
  6. // const component = new MyComponent()
  7. listen(component, 'myEvent')
  8. // Multiple listeners
  9. listen(component, ['eventOne', 'eventTwo'])
  10. })

toHaveFiredEvent

Check whether a event has fired.

  1. toHaveFiredEvent(event: string)
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, 'myEvent')
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredEvent('myEvent')
  10. })

toHaveFiredEvents

Check whether multiple events have fired.

  1. toHaveFiredEvent(events: string[])
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, ['eventOne', 'eventTwo'])
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredEvents(['eventOne', 'eventTwo'])
  10. })

toHaveFiredEventsInOrder

Check whether all the events were fired in matching order.

  1. toHaveFiredEventsInOrder(events: string[])
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, ['eventOne', 'eventTwo'])
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredEventsInOrder(['eventTwo', 'eventOne', 'eventTwo'])
  10. })

toHaveFiredEventTimes

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

  1. toHaveFiredEventsInOrder(event: string, times: number)
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, 'myEvent')
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredEventTimes('myEvent', 1)
  10. })

toHaveFiredEventWith

Check whether a event was fired with a specific value.

  1. toHaveFiredEventWith(event: string, payload: any)
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, 'myEvent')
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredEventWith('myEvent', 100)
  10. })

toHaveFiredLastEventWith

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

  1. toHaveFiredLastEventWith(payload: any)
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, ['eventOne', 'eventTwo', 'eventThree'])
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredLastEventWith('end')
  10. })

toHaveFiredNthEventWith

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

  1. toHaveFiredNthEventWith(n: number, payload: any)
  1. import { render } from '@testing-library/svelte'
  2. import MyComponent from './MyComponent.svelte'
  3. test('', () => {
  4. const { component } = render(MyComponent)
  5. listen(component, ['eventOne', 'eventTwo', 'eventThree'])
  6. // ...
  7. // code ...
  8. // ...
  9. expect(component).toHaveFiredNthEventWith(1, 'start')
  10. })

Contributions

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

LICENSE

MIT