Vitest setup in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Vitest used for in a Svelte project?

Vitest is a testing framework used to write and run tests for your Svelte components and JavaScript code. It helps ensure your code works as expected.

beginner

Which command installs Vitest and its related dependencies in a Svelte project?

You run npm install -D vitest @testing-library/svelte @testing-library/jest-dom to install Vitest and testing libraries for Svelte.

intermediate

Where do you add the Vitest configuration in a SvelteKit project?

You add Vitest settings inside the vite.config.js or vite.config.ts file under the test property to customize test behavior.

beginner

How do you run Vitest tests from the command line?

Use npx vitest or add a script like "test": "vitest" in package.json and run npm test.

intermediate

Why is it important to include @testing-library/svelte with Vitest?

Because @testing-library/svelte provides helpful tools to render Svelte components and interact with them in tests, making tests easier and more reliable.

Which command installs Vitest and testing libraries for Svelte?

A npm install -D vitest @testing-library/svelte @testing-library/jest-dom

B npm install vitest svelte

C npm install -g vitest

D npm install svelte-testing-library

Option A installs Vitest and the recommended testing libraries for Svelte projects.

Where do you configure Vitest settings in a SvelteKit project?

A In a separate vitest.config.js file by default

B In svelte.config.js

C In package.json scripts only

D In vite.config.js or vite.config.ts under the test property

Vitest configuration is usually added inside vite.config.js or vite.config.ts under the test property.

What command runs Vitest tests from the terminal?

A npx vitest

B npm start

C npm build

D vitest run

You run tests with npx vitest or npm test if you set a script.

Why use @testing-library/svelte with Vitest?

A To compile Svelte components faster

B To deploy Svelte apps

C To render and interact with Svelte components in tests easily

D To write CSS styles

@testing-library/svelte helps test Svelte components by rendering and simulating user actions.

Which file typically contains the test scripts for Vitest?

A style.css

B Files with .test.js or .spec.js extensions

C main.js

D index.html

Test files usually have .test.js or .spec.js extensions so Vitest can find and run them.

Explain the steps to set up Vitest in a new Svelte project.

Think about installation, configuration, writing tests, and running them.

Describe why @testing-library/svelte is important when using Vitest.

Focus on how it helps interact with components during testing.