Book Image

Svelte with Test-Driven Development

By : Daniel Irvine
Book Image

Svelte with Test-Driven Development

By: Daniel Irvine

Overview of this book

Svelte is a popular front-end framework used for its focus on performance and user-friendliness, and test-driven development (TDD) is a powerful approach that helps in creating automated tests before writing code. By combining them, you can create efficient, maintainable code for modern applications. Svelte with Test-Driven Development will help you learn effective automated testing practices to build and maintain Svelte applications. In the first part of the book, you’ll find a guided walkthrough on building a SvelteKit application using the TDD workflow. You’ll uncover the main concepts for writing effective unit test cases and practical advice for developing solid, maintainable test suites that can speed up application development while remaining effective as the application evolves. In the next part of the book, you’ll focus on refactoring and advanced test techniques, such as using component mocks and writing BDD-style tests with the Cucumber.js framework. In the final part of the book, you’ll explore how to test complex application and framework features, including authentication, Svelte stores, and service workers. By the end of this book, you’ll be well-equipped to build test-driven Svelte applications by employing theoretical and practical knowledge.
Table of Contents (22 chapters)
1
Part 1: Learning the TDD Cycle
8
Part 2: Refactoring Tests and Application Code
16
Part 3: Testing SvelteKit Features

Updating the route loader to use the API

In this section, you’ll introduce a call to the GET /api/birthdays endpoint using the SvelteKit fetch function. That will involve using a spy.

What is a test spy?

A spy is a function that keeps a record of each time it is called, together with the arguments it is called with. It can then be inspected later to verify that it was called with the correct arguments. The spy is almost always a stub as well, meaning it avoids calling the real function entirely, instead returning a hardcoded – stubbed – value. The spy acts as a substitute for a real function.

In Vitest, a spy is created by calling the vi.fn function.

When we use a test spy, you’ll have at least one test that checks the arguments passed to the spy. Then you’ll have at least one more test for each stubbed return value that the spy returns.

We will use a spy for the fetch function that mimics retrieving birthdays via the GET /api/birthdays...