Vitest setup in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vitest test function.

Svelte

import { [1] } from 'vitest';

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

Atest

Brun

Ccheck

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong import name like 'run' or 'check'.

Forgetting to import the test function.

The test function is imported from Vitest to define test cases.

2fill in blank

medium

Complete the code to assert that a value is true using Vitest.

Svelte

import { test, expect } from 'vitest';
test('check true', () => {
  expect(true).[1]();
});

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

AtoBeFalse

BtoEqualTrue

CtoEqualFalse

DtoBeTruthy

Attempts:

3 left

💡 Hint

Common Mistakes

Using toEqualTrue() which is not a Vitest matcher.

Using toBeFalse() by mistake.

The toBeTruthy() matcher checks if the value is truthy.

3fill in blank

hard

Fix the error in the Vitest config import statement.

Svelte

import { defineConfig } from '[1]';

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

Asvelte

Bvite

Cvitest/config

Dvitest

Attempts:

3 left

💡 Hint

Common Mistakes

Importing defineConfig from vitest or vite causes errors.

Using svelte as import source here.

The Vitest config helper defineConfig is imported from vitest/config.

4fill in blank

hard

Fill both blanks to create a Vitest config with Svelte plugin.

Svelte

import { defineConfig } from 'vitest/config';
import [1] from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [[2]()] 
});

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

Asvelte

Bvitest

CsveltePlugin

Dvite

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and usage causes errors.

Importing from wrong packages.

The Svelte plugin is imported as svelte and used as svelte() in plugins.

5fill in blank

hard

Fill all three blanks to write a basic Vitest test for a Svelte component.

Svelte

import { test, expect } from 'vitest';
import [1] from './MyComponent.svelte';
import { render } from '@testing-library/svelte';

test('renders component', () => {
  const { [2] } = render([3]);
  expect(container).toBeTruthy();
});

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

AMyComponent

Bcontainer

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for destructuring.

Passing wrong argument to render function.

We import the component as MyComponent, destructure container from render(MyComponent), then check if container exists.