Why testing validates Svelte applications - See It in Action

Why testing validates Svelte applications

📖 Scenario: You are building a simple Svelte app that shows a list of tasks. You want to make sure the app works correctly by testing it step-by-step.

🎯 Goal: Build a Svelte component with a list of tasks, add a variable to track completed tasks, filter tasks based on completion, and finally add a test to check the filtered output.

📋 What You'll Learn

Create a Svelte component with a tasks array containing specific tasks

Add a completedThreshold variable to filter tasks

Use a reactive statement to filter tasks based on completedThreshold

Add a test block that checks the filtered tasks length

💡 Why This Matters

🌍 Real World

Testing ensures your Svelte app behaves correctly before users see it. It helps catch bugs early and keeps your app reliable.

💼 Career

Knowing how to test Svelte components is important for frontend developer roles to maintain quality and confidence in your code.

1

DATA SETUP: Create the initial tasks array

Create a tasks array with these exact objects: { id: 1, name: 'Wash dishes', completed: 2 }, { id: 2, name: 'Do laundry', completed: 5 }, and { id: 3, name: 'Write report', completed: 1 } inside a Svelte component.

Svelte

// Your code here

  // Create the tasks array

Hint

Use let tasks = [ ... ] inside the <script> tag.

2

CONFIGURATION: Add a completedThreshold variable

Add a variable called completedThreshold and set it to 2 inside the <script> tag below the tasks array.

Svelte

  let tasks = [
    { id: 1, name: 'Wash dishes', completed: 2 },
    { id: 2, name: 'Do laundry', completed: 5 },
    { id: 3, name: 'Write report', completed: 1 }
  ];
  // Add completedThreshold variable here

Hint

Use let completedThreshold = 2; inside the <script> tag.

3

CORE LOGIC: Filter tasks based on completedThreshold

Add a reactive statement called $: filteredTasks that filters tasks to include only those with completed greater than or equal to completedThreshold.

Svelte

  let tasks = [
    { id: 1, name: 'Wash dishes', completed: 2 },
    { id: 2, name: 'Do laundry', completed: 5 },
    { id: 3, name: 'Write report', completed: 1 }
  ];
  let completedThreshold = 2;
  // Add reactive filteredTasks here

Hint

Use $: filteredTasks = tasks.filter(task => task.completed >= completedThreshold);

4

COMPLETION: Add a test block to check filteredTasks length

Add a <script context="module"> block with a test that imports assert from node:assert and checks that filteredTasks.length equals 2.

Svelte

  // Add test here



  let tasks = [
    { id: 1, name: 'Wash dishes', completed: 2 },
    { id: 2, name: 'Do laundry', completed: 5 },
    { id: 3, name: 'Write report', completed: 1 }
  ];
  let completedThreshold = 2;
  $: filteredTasks = tasks.filter(task => task.completed >= completedThreshold);

Hint

Use a <script context="module"> block with a test function that uses assert.strictEqual.