Unit testing logic in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing function from Svelte Testing Library.

Svelte

import { [1] } from '@testing-library/svelte';

Drag options to blanks, or click blank then click option'

Acheck

Btest

Cmount

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'test' instead of 'render' to display the component.

Trying to use 'mount' which is not from Svelte Testing Library.

The render function is used to render Svelte components in tests.

2fill in blank

medium

Complete the code to check if the component shows the text 'Hello World'.

Svelte

expect(getByText([1])).toBeInTheDocument();

Drag options to blanks, or click blank then click option'

A'World'

B'Hello'

C'Hello World'

D'hello world'

Attempts:

3 left

💡 Hint

Common Mistakes

Using partial text like 'Hello' which may match multiple elements.

Using lowercase text which does not match the exact case.

The exact text 'Hello World' must be matched to find the element.

3fill in blank

hard

Fix the error in the test by completing the assertion to check the button is enabled.

Svelte

expect(button).[1].toBeDisabled();

Drag options to blanks, or click blank then click option'

AtoBe

Bnot

CtoHaveAttribute

DtoBeTruthy

Attempts:

3 left

💡 Hint

Common Mistakes

Using toBe which expects a value, not a matcher.

Using toHaveAttribute without specifying attribute.

The not modifier with toBeDisabled() checks that the button is enabled (not disabled).

4fill in blank

hard

Fill both blanks to create a test that checks if clicking the button calls the mock function.

Svelte

const mockFn = vi.fn();

const { getByRole } = render(Component, { props: { onClick: [1] } });

const button = getByRole('button');

button.[2]();

expect(mockFn).toHaveBeenCalled();

Drag options to blanks, or click blank then click option'

AmockFn

Bclick

CfireEvent

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a wrong function name as the click handler.

Using fireEvent directly on the button instead of click().

The mock function mockFn is passed as the click handler, and click() simulates the button click.

5fill in blank

hard

Fill all three blanks to write a test that renders a component, updates a prop, and checks the updated text.

Svelte

const { getByText, component } = render(Component, { props: { message: [1] } });

expect(getByText([2])).toBeInTheDocument();

component.$set({ message: [3] });

expect(getByText('Updated')).toBeInTheDocument();

Drag options to blanks, or click blank then click option'

A'Initial'

C'Updated'

D'Changed'

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched initial prop and text.

Not updating the prop correctly with $set.

The component starts with message 'Initial', which is checked, then updated to 'Updated' and checked again.