範例

關於測試 Svelte 組件和其他 Svelte 功能的額外資源、模式和最佳實踐，請查看Svelte Society 測試配方。

基本

這個基本範例示範如何

使用 render 將 props 傳遞到您的 Svelte 組件
使用 screen 查詢組件的 DOM 元素結構
使用 @testing-library/user-event 與您的組件互動
使用 expect，使用來自 @testing-library/jest-dom 的匹配器進行斷言

greeter.svelte
<script>
  export let name

  let showGreeting = false

  const handleClick = () => (showGreeting = true)
</script>

<button on:click="{handleClick}">Greet</button>

{#if showGreeting}
<p>Hello {name}</p>
{/if}

greeter.test.js
import {render, screen} from '@testing-library/svelte'
import userEvent from '@testing-library/user-event'
import {expect, test} from 'vitest'

import Greeter from './greeter.svelte'

test('no initial greeting', () => {
  render(Greeter, {name: 'World'})

  const button = screen.getByRole('button', {name: 'Greet'})
  const greeting = screen.queryByText(/hello/iu)

  expect(button).toBeInTheDocument()
  expect(greeting).not.toBeInTheDocument()
})

test('greeting appears on click', async () => {
  const user = userEvent.setup()
  render(Greeter, {name: 'World'})

  const button = screen.getByRole('button')
  await user.click(button)
  const greeting = screen.getByText(/hello world/iu)

  expect(greeting).toBeInTheDocument()
})

事件

可以使用間諜函式測試事件。如果您使用 Vitest，您可以使用 vi.fn() 來建立間諜。

資訊

考慮使用函式 props 來簡化事件測試。

button-with-event.svelte
<button on:click>click me</button>

button-with-prop.svelte
<script>
  export let onClick
</script>

<button on:click="{onClick}">click me</button>

button.test.ts
import {render, screen} from '@testing-library/svelte'
import userEvent from '@testing-library/user-event'
import {expect, test, vi} from 'vitest'

import ButtonWithEvent from './button-with-event.svelte'
import ButtonWithProp from './button-with-prop.svelte'

test('button with event', async () => {
  const user = userEvent.setup()
  const onClick = vi.fn()

  const {component} = render(ButtonWithEvent)
  component.$on('click', onClick)

  const button = screen.getByRole('button')
  await user.click(button)

  expect(onClick).toHaveBeenCalledOnce()
})

test('button with function prop', async () => {
  const user = userEvent.setup()
  const onClick = vi.fn()

  render(ButtonWithProp, {onClick})

  const button = screen.getByRole('button')
  await user.click(button)

  expect(onClick).toHaveBeenCalledOnce()
})

插槽

無法直接測試插槽。通常更容易組織程式碼，以便您可以測試面向使用者的結果，將任何插槽保留為實作細節。

但是，如果插槽是您組件面向開發者的重要 API，您可以使用包裝組件和「虛擬」子組件來測試它們。當以這種方式測試插槽時，測試 ID 會很有幫助。

heading.svelte
<h1>
  <slot />
</h1>

heading.test.svelte
<script>
  import Heading from './heading.svelte'
</script>

<Heading>
  <span data-testid="child" />
</Heading>

heading.test.js
import {render, screen, within} from '@testing-library/svelte'
import {expect, test} from 'vitest'

import HeadingTest from './heading.test.svelte'

test('heading with slot', () => {
  render(HeadingTest)

  const heading = screen.getByRole('heading')
  const child = within(heading).getByTestId('child')

  expect(child).toBeInTheDocument()
})

雙向資料綁定

無法直接測試雙向資料綁定。通常更容易組織程式碼，以便您可以測試面向使用者的結果，將綁定保留為實作細節。

但是，如果雙向綁定是您組件面向開發者的重要 API，您可以使用包裝組件和可寫入的儲存來測試綁定本身。

text-input.svelte
<script>
  export let value = ''
</script>

<input type="text" bind:value="{value}" />

text-input.test.svelte
<script>
  import TextInput from './text-input.svelte'

  export let valueStore
</script>

<TextInput bind:value="{$valueStore}" />

text-input.test.js
import {render, screen} from '@testing-library/svelte'
import userEvent from '@testing-library/user-event'
import {get, writable} from 'svelte/store'
import {expect, test} from 'vitest'

import TextInputTest from './text-input.test.svelte'

test('text input with value binding', async () => {
  const user = userEvent.setup()
  const valueStore = writable('')

  render(TextInputTest, {valueStore})

  const input = screen.getByRole('textbox')
  await user.type(input, 'hello world')

  expect(get(valueStore)).toBe('hello world')
})

上下文

如果您的組件需要存取上下文，您可以在 render 組件時傳遞這些上下文。當您使用諸如 context 之類的選項時，請務必將 props 放在 props 鍵下。

notifications-provider.svelte
<script>
  import {setContext} from 'svelte'
  import {writable} from 'svelte/stores'

  setContext('messages', writable([]))
</script>

notifications.svelte
<script>
  import {getContext} from 'svelte'

  export let label

  const messages = getContext('messages')
</script>

<div role="status" aria-label="{label}">
  {#each $messages as message (message.id)}
  <p>{message.text}</p>
  <hr />
  {/each}
</div>

notifications.test.js
import {render, screen} from '@testing-library/svelte'
import {readable} from 'svelte/store'
import {expect, test} from 'vitest'

import Notifications from './notifications.svelte'

test('notifications with messages from context', async () => {
  const messages = readable([
    {id: 'abc', text: 'hello'},
    {id: 'def', text: 'world'},
  ])

  render(Notifications, {
    context: new Map([['messages', messages]]),
    props: {label: 'Notifications'},
  })

  const status = screen.getByRole('status', {name: 'Notifications'})

  expect(status).toHaveTextContent('hello world')
})

基本​

事件​

插槽​

雙向資料綁定​

上下文​

基本

事件

插槽

雙向資料綁定

上下文