alt="build status">

svelte-component-double

An test double for Svelte components. It works with Vitest, Jest and Jasmine.

Installation

First install the package:

``bash
npm install --save-dev svelte-component-double
`

Vitest setup & usage

Create a file in your Vite project, named test/registerSvelteComponentDouble.js, with the followig content:

`javascript
import { expect } from 'vitest';
import * as matchers from 'svelte-component-double/vitest';

expect.extend(matchers);

import { componentDouble } from 'svelte-component-double';

globalThis.componentDouble = componentDouble;
`

Then update your vi.config.js file to include this as a setup file for Vitest:

`javascript
const config = {
...,
test: {
...,
setupFiles: [
...,
'./test/registerSvelteComponentDouble.js'
]
}
}
`

Then you can begin to write mocked tests like this:

`javascript
import {
describe,
it,
expect,
beforeEach,
vi
} from 'vitest';
import {
render,
screen
} from '@testing-library/svelte';
import Child from './Child.svelte';
import Parent from './Parent.svelte';

vi.mock('./Child.svelte', async () => ({
default: componentDouble('Child')
}));

describe('Parent component', () => {
beforeEach(Child.reset);

it('renders a Child with the right props', () => {
render(Parent);

expect(Child).toBeRenderedWithProps({
foo: "bar"
});
});
});
`

Since mocks are active for the entire module, you may wish to place mocked tests in a separate test file e.g. parent.mocks.test.js, keeping parent.test.js free for non-mocked tests.

$3

Add the following helper in spec/support/jasmine.json.

`json
"helpers": [
"../node_modules/svelte-component-double/lib/matchers/jasmine.js"
]
`

You'll need to use a mocking tool like babel-plugin-rewire-exports.

In the example below, Parent is the component under test, and Child is being spied on.

`javascript
import Child, { rewire as rewire$Child, restore } from '../src/Child.svelte';
import Parent from '../src/Parent.svelte';

import { componentDouble } from 'svelte-component-double';

describe('Parent component', () => {
it('renders a Child', () => {
// ensure JSDOM is set up and ready to go

rewire$Child(componentDouble(Child));

const el = document.createElement('div');
new Parent({ target: el });

expect(Child).toHaveBeenCalled();
expect(el.querySelector(spySelector(Child))).not.toBeNull();
});
});
`

Matchers

The expect(component) function has the following matchers available.

| Matcher | Description |
| -------- | ----------- |
| toBeRendered() | Passes if there was at least one instance of the component instantiated in the current document. |
| toBeRenderedIn(container) | Same but with a specific DOM container instead of | document.body. |
| toBeRenderedWithProps(props) | Passes if there was at least one instance of the component instantiated with these exact props. |
| toBeRenderedWithPropsIn(props, container) | Same as above but with a specic DOM container instead of document.body. |

Identifying stubbed DOM elements

A spied/stubbed component will be rendered into the DOM like this:

`html