Overview

The Svelte Component Test Recipes is a repository that provides test recipes for testing Svelte components using Vitest, Testing Library, and Svelte-htm with TypeScript. The aim of this repository is to provide solutions for testing components that are typically difficult to test, such as components with two-way bindings, name slots, and Context API usage. The author acknowledges the fantastic developer experience (DX) of Svelte but believes that component testing can still be improved over time.

Features

Testing component props: Provides examples on how to test component props, including default values and passing new values.
Get your component props type: Demonstrates how to obtain the type of a component's props when using TypeScript.
Testing component events: Offers solutions for testing component events using Vitest and Testing Library.
Testing the bind: directive (two-way binding): Provides examples of how to test components utilizing the bind: directive for two-way binding.
Testing the use: directive (Svelte Actions): Demonstrates how to test components that utilize the use: directive for Svelte Actions.
Testing slots: Provides examples of how to test components with slots, including fallbacks, named slots, and optional slots.
Slot props: Covers testing components that utilize slot props.
Testing the Context API: Offers solutions for testing components that use the Context API.
Testing components that use SvelteKit runtime modules: Provides examples on how to test components that use SvelteKit runtime modules like $app/stores and $app/navigation.
Testing data fetching components using msw: Demonstrates how to test components that perform data fetching using Mock Service Worker (msw).

Summary

The Svelte Component Test Recipes repository offers a collection of recipes for testing Svelte components using Vitest, Testing Library, and Svelte-htm with TypeScript. The recipes cover various testing scenarios, including testing props, events, directives, slots, the Context API, and components that use SvelteKit runtime modules. The repository provides code examples and guidelines on how to effectively test Svelte components to improve the development experience. Developers can contribute to the repository by adding more test recipes through opening issues or submitting pull requests.

Wd David

Svelte Component Test Demo

Svelte Component Test Recipes

Svelte Hover Draw Svg