@testing-library/svelte-core

Do you want to build your own Svelte testing library? You may want to use our
rendering core, which abstracts away differences in Svelte versions to provide a
simple API to render Svelte components into the document and clean them up
afterwards.

Table of Contents

- Example Usage
- API
- render
- setup
- mount
- cleanup
- addCleanupTask
- removeCleanupTask
- Utility types

Example Usage

``ts
import { beforeEach } from 'vitest'
import * as SvelteCore from '@testing-library/svelte-core'
import type {
Component,
Exports,
Rerender,
} from '@testing-library/svelte-core/types'

import { bindQueries, type Queries } from './bring-your-own-queries.js'

beforeEach(() => {
SvelteCore.cleanup()
})

export interface RenderResult extends Queries {
container: HTMLElement
component: Exports
rerender: Rerender
unmount: () => void
}

export const render = (
Component: SvelteCore.ComponentImport,
options: SvelteCore.ComponentOptions
): RenderResult => {
const { baseElement, component, container, rerender, unmount } =
SvelteCore.render(Component, options)

const queries = bindQueries(baseElement)

return { component, container, rerender, unmount, ...queries }
}
`

API

$3

Set up the document and mount a component into that document.

`ts
const { baseElement, container, component, rerender, unmount } = render(
Component,
componentOptions,
setupOptions
)
`

| Argument | Type | Description |
| ------------------ | ------------------------------------------------------- | --------------------------------------------- |
| Component | [Svelte component][svelte-component-docs] | An imported Svelte component |
| componentOptions | Props or partial [mount options][svelte-mount-docs] | Options for how the component will be mounted |
| setupOptions | { baseElement?: HTMLElement } | Optionally override baseElement |

| Result | Type | Description | Default |
| ------------- | ------------------------------------------ | ---------------------------------------- | ----------------------------------- |
| baseElement | HTMLElement | The base element | document.body |
| container | HTMLElement | The component's immediate parent element |