init

.github/workflows/ci.yml

@@ -0,0 +1,78 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+  workflow_dispatch:
+
+concurrency:
+  group: ci-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+env:
+  PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.cache/ms-playwright
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node version to ${{ inputs.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ inputs.node-version }}
+
+      - name: Install
+        run: pnpm i
+
+      - name: Lint
+        run: pnpm run lint
+
+  test:
+    runs-on: ${{ matrix.os }}
+
+    timeout-minutes: 30
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node_version: [20]
+        include:
+          - os: macos-14
+            node_version: 20
+          - os: windows-latest
+            node_version: 20
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node version to ${{ inputs.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ inputs.node-version }}
+
+      - name: Install
+        run: pnpm i
+
+      - name: Install Playwright Dependencies
+        run: pnpm exec playwright install chromium --with-deps
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Test
+        run: pnpm run test

.github/workflows/publish.yml

@@ -0,0 +1,48 @@
+name: Publish Package
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  publish:
+    if: github.repository == 'vitest-dev/vitest-browser-vue'
+    runs-on: ubuntu-latest
+    environment: Release
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node version to 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install --frozen-lockfile --prefer-offline
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+      - name: Build
+        run: pnpm build
+
+      - name: Publish to npm
+        run: pnpm run publish-ci ${{ github.ref_name }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Generate Changelog
+        run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,27 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lib-cov
+coverage
+!**/integrations/coverage
+node_modules
+.env
+.cache
+dist
+.idea
+.vite-node
+ltex*
+.DS_Store
+bench/test/*/*/
+**/bench.json
+**/browser/browser.json
+docs/public/user-avatars
+docs/public/sponsors
+.eslintcache
+docs/.vitepress/cache/
+!test/cli/fixtures/dotted-files/**/.cache
+test/**/__screenshots__/**/*
+test/browser/fixtures/update-snapshot/basic.test.ts
+.vitest-reports

README.md

@@ -0,0 +1,53 @@
+# vitest-browser-svelte
+
+Render React components in Vitest Browser Mode. This library follows `testing-library` principles and exposes only [locators](https://vitest.dev/guide/browser/locators) and utilities that encourage you to write tests that closely resemble how your React components are used.
+
+Requires `vitest` and `@vitest/browser` 2.1.0 or higher.
+
+```tsx
+import { render } from 'vitest-browser-svelte'
+import { expect, test } from 'vitest'
+
+test('counter button increments the count', async () => {
+  const screen = render(<Component count={1} />)
+
+  await screen.getByRole('button', { name: 'Increment' }).click()
+
+  await expect.element(screen.getByText('Count is 2')).toBeVisible()
+})
+```
+
+> [!NOTE]
+> This library doesn't expose or use `act`. Instead, you should use Vitest's locators and `expect.element` API that have [retry-ability mechanism](https://vitest.dev/guide/browser/assertion-api) baked in.
+
+`vitest-browser-svelte` also automatically injects `render` and `cleanup` methods on the `page`. Example:
+
+```ts
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    // if the types are not picked up, add `vitest-browser-svelte` to
+    // "compilerOptions.types" in your tsconfig or
+    // import `vitest-browser-svelte` manually so TypeScript can pick it up
+    setupFiles: ['vitest-browser-svelte'],
+  },
+})
+```
+
+```tsx
+import { page } from '@vitest/browser/context'
+
+test('counter button increments the count', async () => {
+  const screen = page.render(<Component count={1} />)
+
+  screen.cleanup()
+})
+```
+
+Unlike `@testing-library/svelte`, `vitest-browser-svelte` cleans up the component before the test starts instead of after, so you can see the rendered result in your UI. To avoid auto-cleanup, import the `render` function from `vitest-browser-vue/pure`.
+
+## Special thanks
+
+- Inspired by [`@testing-library/svelte`](https://github.com/testing-library/svelte-testing-library)

eslint.config.js

@@ -0,0 +1,47 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    vue: false,
+    // Disable tests rules because we need to test with various setup
+    test: false,
+    ignores: [
+      'types/**/*.d.ts',
+    ],
+  },
+  {
+    rules: {
+      // prefer global Buffer to not initialize the whole module
+      'node/prefer-global/buffer': 'off',
+      'node/prefer-global/process': 'off',
+      'no-empty-pattern': 'off',
+      'antfu/indent-binary-ops': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      'style/member-delimiter-style': [
+        'error',
+        {
+          multiline: { delimiter: 'none' },
+          singleline: { delimiter: 'semi' },
+        },
+      ],
+      // let TypeScript handle this
+      'no-undef': 'off',
+      'ts/no-invalid-this': 'off',
+      'eslint-comments/no-unlimited-disable': 'off',
+      'curly': ['error', 'all'],
+
+      // TODO: migrate and turn it back on
+      'ts/ban-types': 'off',
+      'ts/no-unsafe-function-type': 'off',
+
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: ['path'],
+        },
+      ],
+
+      'import/no-named-as-default': 'off',
+    },
+  },
+)

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "vitest-browser-svelte",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "[email protected]",
+  "description": "Render Svelte components in Vitest Browser Mode",
+  "author": "Vitest Team",
+  "license": "MIT",
+  "funding": "https://opencollective.com/vitest",
+  "homepage": "https://github.com/vitest-dev/vitest-browser-svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitest-dev/vitest-browser-svelte.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vitest-dev/vitest-browser-svelte/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./pure": {
+      "types": "./types/pure.d.ts",
+      "default": "./src/pure.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./types/index.d.ts",
+  "files": [
+    "src",
+    "types"
+  ],
+  "engines": {
+    "node": "^18.0.0 || >=20.0.0"
+  },
+  "scripts": {
+    "test": "vitest",
+    "publish-ci": "tsx scripts/publish-ci.ts",
+    "release": "tsx scripts/release.ts",
+    "lint": "eslint --cache .",
+    "lint:fix": "pnpm lint --fix"
+  },
+  "peerDependencies": {
+    "@vitest/browser": "^2.1.0-beta.4",
+    "svelte": ">3.0.0",
+    "vitest": "^2.1.0-beta.4"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.24.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@vitest/browser": "^2.1.0-beta.4",
+    "eslint": "^9.8.0",
+    "playwright": "^1.46.0",
+    "svelte": "^5.0.0-next.210",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "vitest": "^2.1.0-beta.4"
+  }
+}