vitest-browser-svelte

KO | EN

gitlite — search

#javascript #react #ai #go #machine-learning #rust #deep-learning #linux #cli #kubernetes #awesome-list #security #mcp #open-source

vitest-browser-svelte

(★ 65)

Render Svelte components in Vitest Browser Mode

vitest-browser-svelte 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vitest-browser-svelte

[Docs](https://vitest.dev/api/browser/svelte.html) | [Package](https://npmx.dev/package/vitest-browser-svelte)

Render Svelte 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 Svelte components are used.

Requires `vitest` 4.0.0 or higher.

```tsx
import { render } from 'vitest-browser-svelte'
import { expect, test } from 'vitest'
import Component from './Component.svelte'

test('counter button increments the count', async () => {
  const screen = await render(Component, {
    initialCount: 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 a `render` method 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'],
    browser: {
      // ... your browser config
    },
  },
})
```

```tsx
import { page } from 'vitest/browser'
import Component from './Component.svelte'

test('counter button increments the count', async () => {
  const screen = await page.render(Component, {
    initialCount: 1,
  })

// ...
})
```

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-svelte/pure`.

## Special thanks

- Forked from [`@testing-library/svelte`](https://github.com/testing-library/svelte-testing-library)

vitest-browser-svelte

vitest-browser-svelte 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vitest-browser-svelte

vitest-browser-svelte 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README