Component testing with Testing Library in Svelte - Step-by-Step Execution

Concept Flow - Component testing with Testing Library

Write Svelte Component

↓

Write Test File

↓

Render Component in Test

↓

Query Elements

↓

Simulate User Actions

↓

Assert Expected Output

↓

Test Pass or Fail

This flow shows how you write a Svelte component, then write a test that renders it, interacts with it, and checks the output.

Execution Sample

Svelte

import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

test('increments count on button click', async () => {
  const { getByText } = render(Counter);
  const button = getByText('Count: 0');
  await fireEvent.click(button);
  getByText('Count: 1');
});

This test renders a Counter component, clicks its button, and checks the count increments.

Execution Table

Step	Action	Evaluation	Result
1	Render Counter component	Component shows button with text 'Count: 0'	Button with text 'Count: 0' is in DOM
2	Find button by text 'Count: 0'	Button found	button variable assigned
3	Click button	Button click event triggers increment	Count state changes from 0 to 1
4	Check for text 'Count: 1'	Text found in DOM	Test passes
5	Test ends	No errors	Test completes successfully

💡 Test ends after verifying count incremented to 1

Variable Tracker

Variable	Start	After Step 3	Final
count	0	1	1
button	undefined	button element	button element

Key Moments - 2 Insights

Why do we use getByText to find the button instead of a CSS selector?

getByText finds elements by visible text, matching how a user sees the page. This matches Testing Library's goal to test like a user, as shown in step 2 of the execution_table.

Why do we await fireEvent.click(button)?

Because clicking can trigger asynchronous updates in Svelte, awaiting ensures the DOM updates before we check the new text, as shown between steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 3?

A 1

B 0

C undefined

D 2

💡 Hint

Check variable_tracker column 'After Step 3' for 'count'

At which step does the test confirm the button text changed to 'Count: 1'?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at execution_table row where 'Check for text "Count: 1"' happens

If fireEvent.click was not awaited, what might happen?

A Test would fail to find the button

B Test might check old text before update

C Count would increment twice

D Test would pass immediately

💡 Hint

Refer to key_moments explanation about awaiting fireEvent.click

Concept Snapshot

Component testing with Testing Library in Svelte:
- Render component with render()
- Find elements by visible text or roles
- Simulate user actions with fireEvent
- Await async updates
- Assert expected DOM changes
- Tests mimic user behavior for reliability

Full Transcript

Component testing with Testing Library in Svelte involves writing a test that renders the component, finds elements by their visible text, simulates user actions like clicks, and then checks if the component updated as expected. The test uses render() to create the component in a test environment, getByText() to find elements as a user would see them, and fireEvent.click() to simulate clicking. Awaiting the click ensures the component finishes updating before assertions. This approach helps ensure the component works correctly from a user's perspective.