Vitest setup in Svelte - Step-by-Step Execution

Concept Flow - Vitest setup

Start project

↓

Install Vitest

↓

Configure vitest.config.ts

↓

Write test files

↓

Run tests with vitest

↓

View test results

↓

Fix code or tests if needed

↓

Repeat testing cycle

This flow shows the steps to set up Vitest in a Svelte project, from installation to running tests and fixing code.

Execution Sample

Svelte

npm install -D vitest

// vitest.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({ test: { globals: true } });

// example.test.ts
describe('sum', () => { it('adds numbers', () => { expect(1 + 2).toBe(3); }); });

This code installs Vitest, configures it, and defines a simple test that checks if 1 + 2 equals 3.

Execution Table

Step	Action	Command/Code	Result/Output
1	Install Vitest	npm install -D vitest	Vitest added to dev dependencies
2	Create config file	vitest.config.ts with defineConfig	Vitest configured with globals enabled
3	Write test file	example.test.ts with describe/it/expect	Test file ready to run
4	Run tests	npx vitest run	Test suite runs, output shows 1 test passed
5	Check results	Test output	1 test passed, no errors
6	Fix code/tests if needed	Edit code or tests	Code/tests updated
7	Re-run tests	npx vitest run	Tests re-run to verify fixes

💡 Testing cycle ends when all tests pass or developer stops

Variable Tracker

Variable	Start	After Install	After Config	After Test File	After Run	Final
Vitest package	Not installed	Installed	Installed	Installed	Installed	Installed
vitest.config.ts	Not created	Not created	Created	Created	Created	Created
Test files	None	None	None	Created	Created	Created
Test results	N/A	N/A	N/A	N/A	1 test passed	1 test passed

Key Moments - 3 Insights

Why do we need a vitest.config.ts file?

The config file sets up Vitest options like enabling globals, so tests can run smoothly. See step 2 in execution_table.

What does 'globals: true' do in the config?

It allows using test functions like describe and it without importing them in every file, as shown in the test code in execution_sample.

Why run 'npx vitest run' instead of just 'vitest'?

'npx vitest run' runs tests once and exits, good for CI or quick checks. Running 'vitest' alone starts watch mode. See step 4 and 7.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result after step 4?

A Test suite runs, output shows 1 test passed

B Vitest package installed

C Config file created

D Test files written

💡 Hint

Check the 'Result/Output' column for step 4 in execution_table

At which step is the vitest.config.ts file created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column in execution_table for config file creation

If we remove 'globals: true' from config, what changes in the test code?

A Tests fail immediately

B Tests run faster

C We must import describe, it, expect in each test file

D No change at all

💡 Hint

Refer to key_moments about 'globals: true' and execution_sample test code

Concept Snapshot

Vitest setup in Svelte:
1. Install Vitest with npm.
2. Create vitest.config.ts to configure options.
3. Write test files using describe, it, expect.
4. Run tests with 'npx vitest run'.
5. Fix code/tests and repeat.
Use 'globals: true' to avoid importing test functions every time.

Full Transcript

To set up Vitest in a Svelte project, first install it using npm. Then create a configuration file named vitest.config.ts where you define test options like enabling globals. Write your test files using Vitest's describe, it, and expect functions. Run your tests using 'npx vitest run' to see results. If tests fail, fix your code or tests and run again. Enabling globals in config lets you use test functions without importing them each time. This cycle helps you test your code efficiently.

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