Component testing with Testing Library in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the render function from Testing Library.

Svelte

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

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

Abuild

Bmount

Ccreate

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mount' or 'create' which are not part of Testing Library for Svelte.

Forgetting to import the render function.

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

2fill in blank

medium

Complete the code to render the Button component in the test.

Svelte

const { getByText } = [1](Button);

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

Arender

Bcreate

Cmount

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using functions like 'mount' which are not from Testing Library.

Trying to call the component directly without render.

The render function renders the component and returns helpers like getByText.

3fill in blank

hard

Fix the error in the assertion to check if the button text is 'Click me'.

Svelte

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

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

A'Submit'

B'Click me'

C'click me'

D'Click Me'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong capitalization or different text strings.

Forgetting quotes around the text string.

The exact text in the button is 'Click me', so the assertion must use this exact string.

4fill in blank

hard

Fill both blanks to import and use the fireEvent to simulate a click.

Svelte

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

fireEvent.[2](button);

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

AfireEvent

Bclick

Chover

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Importing wrong functions like 'click' directly.

Using event names like 'hover' or 'focus' instead of 'click' for clicking.

You import fireEvent to simulate user events, and use fireEvent.click to simulate a click.

5fill in blank

hard

Fill all three blanks to test if a callback is called when the button is clicked.

Svelte

const handleClick = jest.fn();
const { getByText } = [1](Button, { props: { onClick: [2] } });

fireEvent.click(getByText([3]));
expect(handleClick).toHaveBeenCalled();

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

Arender

BhandleClick

C'Click me'

DfireEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Not passing the mock function as a prop.

Using wrong text in getByText query.

Forgetting to simulate the click event.

You render the component with the handleClick function as a prop, then simulate a click on the button with text 'Click me'.