Svelte Component Test Recipes
Svelte component test recipes using Vitest & Testing Library with TypeScript
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.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.