Vitest setup in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vitest test for a Svelte component?

Given this Svelte component and Vitest test, what will the test output?

Svelte

/* Counter.svelte */
<script>
  export let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment} aria-label="increment">Count: {count}</button>

/* Counter.test.js */
import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import Counter from './Counter.svelte';

describe('Counter component', () => {
  it('increments count on button click', async () => {
    const { getByRole } = render(Counter, { props: { count: 0 } });
    const button = getByRole('button', { name: 'increment' });
    expect(button.textContent).toBe('Count: 0');
    await fireEvent.click(button);
    expect(button.textContent).toBe('Count: 1');
  });
});

A Test passes because the count increments from 0 to 1 after click

B Test fails because the count does not update after click

C Test fails with a syntax error in the test file

D Test passes but the button text remains 'Count: 0'

💡 Hint

Think about how Svelte updates reactive variables and how fireEvent simulates user clicks.

The test renders the Counter component with count 0. Clicking the button triggers increment(), updating count to 1. The button text updates accordingly, so the test passes.

📝 Syntax

intermediate

Which Vitest config snippet correctly sets up Svelte testing?

You want to configure Vitest to work with Svelte components. Which config snippet is correct?

A

import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: ['svelte'],
  test: {
    environment: 'jsdom'
  }
});

B

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'node'
  }
});

C

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

export default defineConfig({
  plugins: [svelte()],
  test: {
    environment: 'node'
  }
});

D

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

export default defineConfig({
  plugins: [svelte()],
  test: {
    environment: 'jsdom'
  }
});

💡 Hint

Svelte needs its plugin and tests usually run in a browser-like environment.

Option D correctly imports the Svelte plugin and sets the test environment to 'jsdom' which simulates a browser for DOM testing.

🔧 Debug

advanced

Why does this Vitest test for a Svelte component fail with 'TypeError: Cannot read property'?

Examine the test code below. Why does it throw a TypeError during execution?

Svelte

import { render } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import MyComponent from './MyComponent.svelte';

describe('MyComponent', () => {
  it('renders with prop', () => {
    const { getByText } = render(MyComponent, { title: 'Hello' });
    expect(getByText('Hello')).toBeTruthy();
  });
});

A The render function expects props inside a 'props' object, not passed directly

B The component file MyComponent.svelte is missing and causes the error

C The getByText method is not available from render

D The test is missing an async keyword causing the error

💡 Hint

Check how props are passed to the render function in @testing-library/svelte.

The render function expects an options object with a nested 'props' property. Passing { title: 'Hello' } leaves the component's props undefined, causing a TypeError when accessing the title property.

❓ state_output

advanced

What is the value of 'count' after this Vitest test runs?

Consider this Svelte component and test. What is the final value of 'count' after the test completes?

Svelte

/* Counter.svelte */
<script>
  export let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment} aria-label="increment">Count: {count}</button>

/* Counter.test.js */
import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import Counter from './Counter.svelte';

describe('Counter', () => {
  it('increments twice', async () => {
    const { component, getByRole } = render(Counter, { props: { count: 0 } });
    const button = getByRole('button', { name: 'increment' });
    await fireEvent.click(button);
    await fireEvent.click(button);
    expect(button.textContent).toBe('Count: 2');
  });
});

A 1

B 2

C 0

D Undefined

💡 Hint

Each click triggers increment which adds 1 to count.

The test clicks the button twice, each click increments count by 1, so final count is 2.

🧠 Conceptual

expert

Which statement best describes Vitest's role in Svelte testing?

Choose the most accurate description of what Vitest does when testing Svelte components.

A Vitest replaces Svelte's compiler to generate test-specific component code

B Vitest compiles Svelte components into static HTML files for manual testing

C Vitest runs tests in a Node.js environment simulating browser APIs to verify component logic and DOM updates

D Vitest only runs unit tests on JavaScript functions, ignoring Svelte components

💡 Hint

Think about how Vitest uses jsdom and testing libraries to simulate browser behavior.

Vitest runs tests in a Node.js environment with jsdom to simulate browser APIs, allowing tests to check component logic and DOM changes without a real browser.