Unit testing logic in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component test?

Given the following Svelte component and its test, what will the test output?

Svelte

/* Component: Counter.svelte */
<script>
  export let start = 0;
  let count = start;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment} aria-label="Increment">Count: {count}</button>

/* Test file: Counter.test.js */
import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

test('increments count on click', async () => {
  const { getByRole } = render(Counter, { start: 5 });
  const button = getByRole('button', { name: /increment/i });
  expect(button.textContent).toBe('Count: 5');
  await fireEvent.click(button);
  expect(button.textContent).toBe('Count: 6');
});

A Test throws a runtime error due to missing event handler.

B Test fails because the button text does not update after click.

C Test fails because initial count is 0 instead of 5.

D Test passes successfully with count incrementing from 5 to 6.

💡 Hint

Remember that Svelte updates reactive variables and the DOM automatically after events.

The component initializes count with the start prop (5). Clicking the button calls increment, increasing count to 6. The test checks the button text before and after the click, which matches the expected values, so the test passes.

❓ state_output

intermediate

What is the value of 'message' after this test runs?

Consider this Svelte component and its test. What will be the final value of the 'message' variable after the test completes?

Svelte

<script>
  import { writable } from 'svelte/store';
  export const message = writable('Hello');
  export function updateMessage(newMsg) {
    message.set(newMsg);
  }
</script>

// Test file
import { message, updateMessage } from './MessageStore.js';

test('updates message store', () => {
  let current;
  const unsubscribe = message.subscribe(value => current = value);
  expect(current).toBe('Hello');
  updateMessage('Hi there');
  expect(current).toBe('Hi there');
  unsubscribe();
});

A 'Hello'

B 'Hi there'

C undefined

D null

💡 Hint

Svelte stores update subscribers immediately when set is called.

The test subscribes to the message store and captures its value in 'current'. Initially, 'current' is 'Hello'. After calling updateMessage('Hi there'), the store updates and the subscriber sets 'current' to 'Hi there'.

📝 Syntax

advanced

Which option causes a syntax error in this Svelte test?

Identify which test code snippet will cause a syntax error when testing a Svelte component.

Svelte

import { render } from '@testing-library/svelte';
import MyComponent from './MyComponent.svelte';

A ;)} ;)(tnemucoDehTnIeBot.))'olleH'(txeTyBteg(tcepxe ;)tnenopmoCyM(redner = } txeTyBteg { tsnoc { >= )( ,'yltcerroc sredner'(tset

B test('renders correctly', () => { const { getByText } = render(MyComponent); expect(getByText('Hello')).toBeInTheDocument() });

C test('renders correctly', () => { const { getByText } = render(MyComponent); expect(getByText('Hello')).toBeInTheDocument(); });

D est('renders correctly', () => { const { getByText } = render(MyComponent); expect(getByText('Hello')).toBeInTheDocument(); });

💡 Hint

Check the syntax of the test function declaration carefully.

Option C is missing a comma between the test name string and the arrow function, causing a syntax error. The others are syntactically correct.

🔧 Debug

advanced

Why does this Svelte test fail to detect a button click?

This test tries to check if a button click updates text, but it fails. Why?

Svelte

<script>
  let clicked = false;
  function handleClick() {
    clicked = true;
  }
</script>
<button on:click={handleClick}>Click me</button>
<p>{clicked ? 'Clicked!' : 'Not clicked'}</p>

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

test('button click updates text', async () => {
  const { getByText } = render(ClickComponent);
  const button = getByText('Click me');
  expect(getByText('Not clicked')).toBeInTheDocument();
  await fireEvent.click(button);
  expect(getByText('Clicked!')).toBeInTheDocument();
});

A The 'clicked' variable is not reactive, so Svelte does not update the DOM after click.

B The test does not wait for the DOM update after the click event.

C The button does not have an on:click event handler attached.

D The test uses getByText incorrectly and cannot find the button.

💡 Hint

In Svelte, variables must be reactive to trigger DOM updates.

The 'clicked' variable is a plain local variable. Svelte only updates the DOM when reactive variables (declared with 'let') change. Here, 'clicked' is reactive but the function changes it directly without using $: or a reactive statement, so the DOM does not update.

🧠 Conceptual

expert

Which statement best explains why mocking a Svelte store is important in unit tests?

When unit testing a Svelte component that uses a writable store, why is it important to mock the store instead of using the real one?

A Mocking the store isolates the component test from external state changes, ensuring predictable and fast tests.

B Using the real store always causes runtime errors in tests due to Svelte internals.

C Mocking the store is unnecessary because Svelte automatically resets stores between tests.

D The real store cannot be imported in test files due to module resolution issues.

💡 Hint

Think about test isolation and control over data during tests.

Mocking stores allows tests to control the data and behavior of the store, preventing interference from other tests or app state. This leads to more reliable and faster unit tests.