Vitest setup for unit testing in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to define a test in Vitest.

Vue

import { [1] } from 'vitest';

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

Arender

Bmount

Cdescribe

Dtest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'describe' instead of 'test' for a single test case.

Trying to import 'mount' which is from Vue Test Utils, not Vitest.

The test function is used to define a unit test in Vitest.

2fill in blank

medium

Complete the code to import the assertion function to check values in Vitest.

Vue

import { [1] } from 'vitest';

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

Acheck

Bassert

Cexpect

Dverify

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'assert' which is not part of Vitest's API.

Confusing with other testing libraries' assertion functions.

The expect function is used to write assertions in Vitest tests.

3fill in blank

hard

Fix the error in the Vitest test function declaration.

Vue

test('adds numbers', () => {
  const sum = 1 + 2;
  [1](sum).toBe(3);
});

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

Acheck

Bexpect

Cassert

Dverify

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like 'check' or 'assert'.

Forgetting to wrap the value with expect.

The assertion function expect is used to check the test result.

4fill in blank

hard

Fill both blanks to create a Vitest test suite with a test case.

Vue

import { [1], [2] } from 'vitest';

describe('math tests', () => {
  test('multiply', () => {
    const result = 2 * 3;
    expect(result).toBe(6);
  });
});

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

Adescribe

Btest

Cexpect

Dmount

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'mount' which is unrelated to Vitest.

Mixing up 'expect' with test definition functions.

describe groups tests, and test defines a test case in Vitest.

5fill in blank

hard

Fill all three blanks to write a Vitest test that checks if a Vue component renders text.

Vue

import { [1], [2] } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';

test('renders greeting', () => {
  const wrapper = shallowMount(HelloWorld);
  [3](wrapper.text()).toContain('Hello');
});

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

Atest

Bexpect

CshallowMount

Ddescribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'describe' instead of 'test' for the test case.

Not using 'expect' to check the component output.

test defines the test, expect asserts the output. shallowMount is imported separately.