Why testing validates Svelte applications - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Svelte testing library function needed to render a component.

Svelte

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

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

Atest

Bmount

Ccompile

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mount' which is from other frameworks

Trying to import 'test' which is not a function here

The render function from '@testing-library/svelte' is used to render Svelte components in tests.

2fill in blank

medium

Complete the code to check if a button with text 'Click me' is in the document after rendering.

Svelte

const { getByText } = render(Component);
expect(getByText('[1]')).toBeInTheDocument();

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

AClick me

BCancel

CHello

DSubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong button text like 'Submit' or 'Cancel' which won't be found

The test checks for a button with the exact text 'Click me' to confirm it appears in the rendered component.

3fill in blank

hard

Fix the error in the test by completing the code to simulate a click event on the button.

Svelte

const { getByText } = render(Component);
const button = getByText('Click me');
[1](button);

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

AfireEvent.submit

BfireEvent.change

CfireEvent.click

DfireEvent.hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'change' or 'submit' which are for different events

Using 'hover' which is not a click

To simulate a user clicking the button, use fireEvent.click on the button element.

4fill in blank

hard

Fill both blanks to import the event helper and simulate a click on a button.

Svelte

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

const { getByText } = render(Component);
[2](getByText('Click me'));

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

AfireEvent

BfireEvent.click

CfireEvent.change

DfireEvent.submit

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'fireEvent.click' directly which is incorrect

Using 'change' or 'submit' instead of 'click'

You import fireEvent and then call fireEvent.click to simulate clicking the button.

5fill in blank

hard

Fill all three blanks to write a test that renders a component, clicks a button, and checks if a message appears.

Svelte

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

test('shows message on click', async () => {
  const { getByText, queryByText } = render(Component);
  expect(queryByText('Hello!')).toBeNull();
  await [2](getByText('Click me'));
  expect(getByText('[3]')).toBeInTheDocument();
});

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

AfireEvent

BfireEvent.click

CHello!

DfireEvent.hover

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to await the click event

Checking for wrong message text

Using wrong event like 'hover'

This test imports fireEvent, clicks the button with fireEvent.click, and then checks that the message 'Hello!' appears.