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.

Practice

1. What is the main purpose of Vitest in a Svelte project?

easy

A. To deploy the app to a server

B. To build the Svelte app for production

C. To style components with CSS

D. To run tests and check if components work correctly

Solution

1. Step 1: Understand Vitest's role

   Vitest is a testing tool used to verify code correctness.

2. Step 2: Compare options with Vitest's purpose

   Only To run tests and check if components work correctly describes testing, which matches Vitest's function.

3. Final Answer:

   To run tests and check if components work correctly -> Option D

4. Quick Check:

   Vitest = Testing tool [OK]

Hint: Vitest is for testing, not building or styling [OK]

Common Mistakes:

• Confusing Vitest with build tools
• Thinking Vitest styles components
• Assuming Vitest deploys apps

2. Which of the following is the correct way to configure Vitest for Svelte testing in vite.config.js?

easy

A. import { defineConfig } from 'vite'; export default defineConfig({ plugins: [], test: { environment: 'node' } });

B. import { defineConfig } from 'vite'; import svelte from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [], test: { environment: 'jsdom' } });

C. import { defineConfig } from 'vite'; import svelte from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [svelte()], test: { environment: 'jsdom' } });

D. import { defineConfig } from 'vitest'; import svelte from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [svelte()] });

Solution

1. Step 1: Check plugin usage for Svelte

   The Svelte plugin must be included in plugins array for Svelte support.

2. Step 2: Verify test environment setting

   Vitest tests for Svelte need 'jsdom' environment to simulate browser.

3. Final Answer:

   Correct config includes Svelte plugin and jsdom environment -> Option C

4. Quick Check:

   Plugin + jsdom = Correct Vitest config [OK]

Hint: Include svelte plugin and set environment to jsdom [OK]

Common Mistakes:

• Omitting the Svelte plugin
• Using 'node' instead of 'jsdom' environment
• Importing defineConfig from wrong package

3. Given this test code for a Svelte component using Vitest and @testing-library/svelte:

import { render } from '@testing-library/svelte';
import Button from './Button.svelte';

test('shows button text', () => {
  const { getByText } = render(Button, { props: { label: 'Click me' } });
  getByText('Click me');
});

What happens if the component does NOT display the label prop text?

medium

A. The test throws a syntax error

B. The test fails with an error that text was not found

C. The test passes silently

D. The test logs a warning but passes

Solution

1. Step 1: Understand getByText behavior

   getByText throws an error if the text is not found in the rendered output.

2. Step 2: Analyze test outcome if label missing

   If the component does not show 'Click me', getByText fails and test fails.

3. Final Answer:

   The test fails with an error that text was not found -> Option B

4. Quick Check:

   getByText missing text = test fail [OK]

Hint: getByText throws error if text missing, causing test failure [OK]

Common Mistakes:

• Assuming test passes without text
• Confusing runtime errors with syntax errors
• Thinking warnings allow test to pass

4. You wrote this Vitest config snippet:

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

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

Why might your Svelte component tests fail to run correctly?

medium

A. Because the test environment is set to 'node' instead of 'jsdom'

B. Because the Svelte plugin is missing from plugins

C. Because defineConfig must be imported from 'vitest' not 'vite'

D. Because the test property should be outside defineConfig

Solution

1. Step 1: Check environment setting for browser features

   Svelte components need a browser-like environment; 'node' lacks DOM APIs.

2. Step 2: Understand impact on tests

   Using 'node' causes tests that rely on DOM (like rendering) to fail.

3. Final Answer:

   Because the test environment is set to 'node' instead of 'jsdom' -> Option A

4. Quick Check:

   Use jsdom for DOM tests, not node [OK]

Hint: Use 'jsdom' environment for Svelte component tests [OK]

Common Mistakes:

• Thinking 'node' environment supports DOM
• Confusing import source for defineConfig
• Misplacing test config outside defineConfig

5. You want to test a Svelte component that conditionally renders a message only if a prop show is true. Which Vitest test code correctly checks that the message appears only when show is true?

import { render } from '@testing-library/svelte';
import Message from './Message.svelte';

test('message visibility', () => {
  // Fill in test code here
});

hard

A. const { queryByText } = render(Message, { props: { show: false } });
expect(queryByText('Hello')).toBeNull();
const { getByText } = render(Message, { props: { show: true } });
getByText('Hello');

B. const { getByText } = render(Message, { props: { show: false } });
getByText('Hello');

C. const { getByText } = render(Message, { props: { show: true } });
expect(getByText('Hello')).toBeNull();

D. const { queryByText } = render(Message, { props: { show: true } });
expect(queryByText('Hello')).toBeNull();

Solution

1. Step 1: Test absence when show is false

   Use queryByText to check 'Hello' is not rendered (returns null).

2. Step 2: Test presence when show is true

   Use getByText to confirm 'Hello' is rendered and found.

3. Final Answer:

   Use queryByText for absence and getByText for presence in two renders -> Option A

4. Quick Check:

   queryByText null means no text; getByText finds text [OK]

Hint: Use queryByText to check absence, getByText to check presence [OK]

Common Mistakes:

• Using getByText expecting null when text missing
• Not testing both true and false cases
• Confusing queryByText and getByText roles