Testing svelte5 with vitest and playwright for non svelte-kit projects

Lioloc — Tue, 11 Nov 2025 15:15:20 +0000

I will preface that I'm using Svelte through a non svelte-kit framework called Primate.run, if you're using svelte-kit, you don't need to do any of this, it is already setup out of the box.

With that out of the way, you may be using @testing-library/svelte along with @testing-library/user-event to fire events in a jsdom or happydom environment. This probably will work fine for you. So why consider using playwright in the first place? The "why" is covered extensively here so feel free to give that a quick glance.

The first thing you're going to need is to install a couple packages

The quick way is (although I haven't tested this):

npx vitest init browser

Or you can manually add the packages:

# @vitest/ui is optional
pnpm add -D vitest @vitest/browser vitest-browser-svelte @vitest/browser-playwright @sveltejs/vite-plugin-svelte @vitest/ui

Create a vitest.config.ts

import { svelte } from "@sveltejs/vite-plugin-svelte";
import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vitest/config";

export default defineConfig({
    plugins: [
        svelte({
            compilerOptions: {
                dev: true,
            },
        }),
    ],
    test: {
        include: [
            "**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
        ],
        browser: {
            enabled: true,
            provider: playwright(),
            instances: [{ browser: "chromium" }],
        },
        setupFiles: ["./vitest-setup-client.ts"],
    },
});

Create the setup file to get matchers in your test files
vitest-setup-client.ts

/// <reference types="@vitest/browser/matchers" />

Add the following scripts to your package.json scripts property:

    "scripts": {
        "test": "vitest run",
        "test:ui": "vitest --ui", //if you added @vitest/ui
        "test:watch": "vitest",
        // ... other scripts
     }

And create your first test file that tests a svelte component, here's an example of a simple component I have called step-header.svelte

<script lang="ts">
    let { children }: { children: any } = $props();
</script>

<div
    class="flex items-center justify-between relative bg-gray-100 dark:bg-[#242424] py-8"
>
    {@render children?.()}
</div>

This is an arbitrary demonstration simply to show you how to add children as its not immediately obvious:

step-header.svelte.test.js

import { expect, test } from "vitest";
import { render } from "vitest-browser-svelte";
import { createChildrenSnippet } from "../../../../lib/test/utils.ts";
import StepHeader from "./step-header.svelte";

test("should display the step header", async () => {
    const screen = render(StepHeader, {
        children: createRawSnippet(() => ({
            render: () => "Step Header",
            setup: () => {},
        }));
    });

    const element = screen.getByText("Step Header");

    await expect.element(element).toBeInTheDocument();
});

Obviously its quite verbose to have to use createRawSnippet each time so you can extract it to a separate createChildrenSnippet function like so:

utils.ts

import { createRawSnippet } from "svelte";

export const createChildrenSnippet = (content: any) =>
    createRawSnippet(() => ({
        render: () => content,
        setup: () => {},
    }));

And here's the final test file:

import { expect, test } from "vitest";
import { render } from "vitest-browser-svelte";
import { createChildrenSnippet } from "../../../../lib/test/utils.ts";
import StepHeader from "./step-header.svelte";

test("should display the step header", async () => {
    const screen = render(StepHeader, {
        children: createChildrenSnippet("Step Header"),
    });

    const element = screen.getByText("Step Header");

    await expect.element(element).toBeInTheDocument();
});

And that's it! Hope this helps someone.

Sources:

HTMX, is it a joke?

Lioloc — Mon, 26 May 2025 07:23:30 +0000

Recently a friend of mine told me that when he first heard of HTMX, he thought it was a joke, and he wasn't being sarcastic.

He's a cracked dev that ships things that make actual money. He suggested that anyone building a serious system cannot use HTMX, maintainability being the large culprit (no components?).

I haven't looked into HTMX at all, so my question is, has anyone build a serious application with HTMX?

How would you handle a complex system with multiple components in HTMX?

DEV Community: Lioloc

Testing svelte5 with vitest and playwright for non svelte-kit projects

HTMX, is it a joke?