Testing

SveltePak comes with built-in support for testing your SvelteKit applications. Playwright is used for end-to-end (E2E) testing and Vitest is used for unit testing.

We’ve also setup @testing-library/svelte to work with Vitest to provide a simple and intuitive way to test your Svelte components.

You can run both E2E and unit tests with SveltePak simultaneously by running

pnpm test

E2E Testing

End-to-end (E2E) testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. The purpose of carrying out E2E testing is to identify system dependencies and to ensure that the right information is passed between various system components and systems.

Playwright enables reliable end-to-end testing for modern web apps.

https://playwright.dev/

SveltePak includes native support for E2E testing with Playwright.

Usage

To get started, you can use the test:integration command to run the Playwrite tests:

pnpm test:integration

Writing Tests

You can write tests in the tests directory.

Example

import { expect, test } from "@playwright/test";

test("index page has expected h1", async ({ page }) => {
  await page.goto("/");
  await expect(page.getByRole("heading", { name: "Welcome to SvelteKit" })).toBeVisible();
});

Configuration

You can configure the tests in the playwright.config.ts file.

Example

import type { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
  webServer: {
    command: "npm run build && npm run preview",
    port: 4173
  },
  testDir: "tests",
  testMatch: /(.+.)?(test|spec).[jt]s/
};

export default config;

Unit Testing

Unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures are tested to determine whether they are fit for use.

Vitest is a testing library for SvelteKit.

Usage

By default, Vitest looks for filenames that end with either .spec.js or .test.js

pnpm test:unit

Alternatively, Vitest provide a beautiful UI to view and interact with your tests

pnpm vitest:ui

Then you can visit the Vitest UI at http://localhost:51204/__vitest__/

Writing Tests

We’ve paired Vitest with the @testing-library/svelte library to provide a simple and intuitive way to test your Svelte components.

An example component and test is shown below and can be found in the components/(demo)/counter.svelte and components/(demo)/counter.test.ts files.

import { render, screen } from "@testing-library/svelte";
import { describe, test, expect } from "vitest";
import Counter from "./counter.svelte";

describe("Counter", () => {
  test("shows the initial count when rendered", () => {
    render(Counter, { props: { count: 0 } });
    expect(screen.getByText("Clicked 0 times")).toBeInTheDocument();
  });
  test("increments the count when clicked", async () => {
    render(Counter, { props: { count: 0 } });
    const button = screen.getByText("Increment");
    await button.click();
    expect(screen.getByText("Clicked 1 time")).toBeInTheDocument();
  });
});