svelte-mock

Svelte Mock

Svelte-mock is a testing library to help with mocking svelte components, testing svelte component properties and making code coverage reports more accurate.

Full Documentation

Table of Contents

• Setup
• Usage
• Expect Extensions
  • toHaveInstance
  • toHaveInstanceWithProps
  • toHaveInstanceWithBoundProps
  • toHaveInstanceWithSlots
  • toHaveInstanceWithEventHandlers
  • toHaveProps
  • toHaveBoundProps
  • toHaveSlots
  • toHaveEventHandlers
• Query Functions
  • getInstanceByProps
  • getInstanceByBoundProps
  • getInstanceBySlots
  • getInstanceByEventHandlers

Setup

Note: Jest version must be 25.0.0 for code coverage to work

Add the following to your jest config:

transform: {
  '\\.html$': 'svelte-mock/transform',
  '\\.svelte$': 'svelte-mock/transform'
},
setupFilesAfterEnv: [
  'svelte-mock/extend'
],

Usage

You can mock a svelte component with the following code:

jest.mock('Component.svelte')
import Component from 'Component.svelte'
svelteMock.mockImplementation(Component)

If you want to specify your own mock implementations you can pass a svelte component as a second argument:

svelteMock.mockImplementation(Component, MockComponent)

Expect Extensions

svelte-mock includes some useful expect extensions

toHaveInstance

Passes if a mocked component class has been instantiated at least once.

Example

<Component />

expect(Component).toHaveInstance()

• Component - a svelte component class to be checked for an instance

toHaveInstanceWithProps

Passes if a mocked component class has an instance with props.

Example

<Component first={firstValue} second={secondValue} />

expect(Component).toHaveInstanceWithProps(['first'])
expect(Component).toHaveInstanceWithProps(['first', 'second'])
expect(Component).not.toHaveInstanceWithProps(['nonExistent'])
expect(Component).toHaveInstanceWithProps({ first: firstValue })
expect(Component).not.toHaveInstanceWithProps({ first: wrongValue })

• Component - a svelte component class to be checked for a matching instance

toHaveInstanceWithBoundProps

Passes if a mocked component class has an instance with bound props.

Example

<Component bind:first=firstValue bind:second=secondValue />

expect(Component).toHaveInstanceWithBoundProps(['first'])
expect(Component).toHaveInstanceWithBoundProps(['first', 'second'])
expect(Component).not.toHaveInstanceWithBoundProps(['nonExistent'])
expect(Component).toHaveInstanceWithBoundProps({ first: firstValue })
expect(Component).not.toHaveInstanceWithBoundProps({ first: wrongValue })

• Component - a svelte component class to be checked for a matching instance

toHaveInstanceWithSlots

Passes if a mocked component class has an instance with the specified slots.

Example

<Component>
  <span>First</span>
</Component>
<Component>
  <span slot="first">First</span>
  <span slot="second">Second</span>
</Component>

// Check for unnamed slot
expect(Component).toHaveInstanceWithSlots()
// Check for named slots
expect(Component).toHaveInstanceWithSlots(['first'])
expect(Component).toHaveInstanceWithSlots(['first', 'second'])
expect(Component).not.toHaveInstanceWithSlots(['nonExistent'])
expect(Component).toHaveInstanceWithSlots({ first: firstSlot })
expect(Component).not.toHaveInstanceWithSlots({ first: wrongSlot })

• Component - a svelte component class to be checked for a matching instance

toHaveInstanceWithEventHandlers

Passes if a mocked component class has an instance with event handlers.

Example

<Component on:click="clickFn()" on:custom="customFn()" />

expect(Component).toHaveInstanceWithEventHandlers(['click'])
expect(Component).toHaveInstanceWithEventHandlers(['click', 'custom'])
expect(Component).not.toHaveInstanceWithEventHandlers(['nonExistent'])
expect(Component).toHaveInstanceWithEventHandlers({ click: clickFn })
expect(Component).not.toHaveInstanceWithEventHandlers({ click: wrongFn })

• Component - a svelte component class to be checked for a matching instance

toHaveProps

Passes if a component instance has the specified props.

Example

<Component first={firstValue} second={secondValue} />

expect(component).toHaveProps(['first'])
expect(component).toHaveProps(['first', 'second'])
expect(component).not.toHaveProps(['nonExistent'])
expect(component).toHaveProps({ first: firstValue })
expect(component).not.toHaveProps({ first: wrongValue })

• component - an instance of Component

toHaveBoundProps

Passes if a component instance has the specified bound props.

Example

<Component bind:first=firstValue bind:second=secondValue />

expect(component).toHaveBoundProps(['first'])
expect(component).toHaveBoundProps(['first', 'second'])
expect(component).not.toHaveBoundProps(['nonExistent'])
expect(component).toHaveBoundProps({ first: firstValue })
expect(component).not.toHaveBoundProps({ first: wrongValue })

• component - an instance of Component

toHaveSlots

Passes if a component instance has the specified slots.

Example

<Component>
  <span>First</span>
</Component>
<Component>
  <span slot="first">First</span>
  <span slot="second">Second</span>
</Component>

// Check for unnamed slot
expect(component1).toHaveSlots()
// Check for named slots
expect(component2).toHaveSlots(['first'])
expect(component2).toHaveSlots(['first', 'second'])
expect(component2).not.toHaveSlots(['nonExistent'])
expect(component2).toHaveSlots({ first: firstSlot })
expect(component2).not.toHaveSlots({ first: wrongSlot })

• component1 - an instance of Component
• component2 - an instance of Component

toHaveEventHandlers

Passes if a component instance has the specified event handlers.

Example

<Component on:click="clickFn()" on:custom="customFn()" />

expect(component).toHaveEventHandlers(['click'])
expect(component).toHaveEventHandlers(['click', 'custom'])
expect(component).not.toHaveEventHandlers(['nonExistent'])
expect(component).toHaveEventHandlers({ click: clickFn })
expect(component).not.toHaveEventHandlers({ click: wrongFn })

• component - an instance of Component

Query Functions

getInstanceByProps

Returns the first instance for a component that has the specified props.

Example

<Component first={firstValue} second={secondValue} />

Component.getInstanceByProps(['first'])
Component.getInstanceByProps(['first', 'second'])
Component.getInstanceByProps({ first: firstValue })

• Component - a svelte component class to be checked for an instance

getInstanceByBoundProps

Returns the first instance for a component that has the specified bound props.

Example

<Component bind:first=firstValue bind:second=secondValue />

Component.getInstanceByBoundProps(['first'])
Component.getInstanceByBoundProps(['first', 'second'])
Component.getInstanceByBoundProps({ first: firstValue })

• Component - a svelte component class to be checked for an instance

getInstanceBySlots

Returns the first instance for a component that has the specified slots.

Example

<Component>
  <span>First</span>
</Component>
<Component>
  <span slot="first">First</span>
  <span slot="second">Second</span>
</Component>

// Get component with unnamed slot
Component.getInstanceBySlots()
// Check for named slots
Component.getInstanceBySlots(['first'])
Component.getInstanceBySlots(['first', 'second'])
Component.getInstanceBySlots({ first: firstSlot })

• Component - a svelte component class to be checked for an instance

getInstanceByEventHandlers

Returns the first instance for a component that has the specified event handlers.

Example

<Component on:click="clickFn()" on:custom="customFn()" />

Component.getInstanceByEventHandlers(['click'])
Component.getInstanceByEventHandlers(['click', 'custom'])
Component.getInstanceByEventHandlers({ click: clickFn })

• Component - a svelte component class to be checked for an instance