### Setup Development Environment

Source: https://github.com/testing-library/svelte-testing-library/blob/main/CONTRIBUTING.md

Install dependencies and run all checks after cloning the repository using the 'setup' npm script. This ensures the development environment is correctly configured.

```shell
npm run setup
```

--------------------------------

### Setup for Different Svelte Versions

Source: https://github.com/testing-library/svelte-testing-library/blob/main/CONTRIBUTING.md

Use provided npm scripts to set up your environment for different versions of Svelte (5, 4, 3) and run the associated test suites. This allows testing compatibility with various Svelte releases.

```shell
# Svelte 5
npm run install:5
npm run all

# Svelte 4
npm run install:4
npm run all:legacy

# Svelte 3
npm run install:3
npm run all:legacy
```

--------------------------------

### Manual Setup and Cleanup with @testing-library/svelte

Source: https://github.com/testing-library/svelte-testing-library/blob/main/README.md

Demonstrates the manual process of setting up and cleaning the test environment using `setup()` and `cleanup()` functions from `@testing-library/svelte`. This is useful when auto-cleanup is disabled or not supported by the test runner.

```javascript
import { cleanup, render, setup } from '@testing-library/svelte'

// before
setup()

// test
render(/* ... */)

// after
cleanup()
```

--------------------------------

### Preview Release with npm

Source: https://github.com/testing-library/svelte-testing-library/blob/main/CONTRIBUTING.md

Preview the next release version and changelog from a given branch using the 'preview-release' npm script. This requires push access to the repository and the branch to exist in GitHub.

```shell
npm run preview-release
```

--------------------------------

### Lint and Format Code

Source: https://github.com/testing-library/svelte-testing-library/blob/main/CONTRIBUTING.md

Run auto-formatting to ensure any changes adhere to the code style of the repository. Use 'lint' to run checks without making any modifications.

```shell
npm run format
npm run lint
```

--------------------------------

### Svelte Component: Basic Greeting

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/basic/readme.md

A simple Svelte component that accepts a 'name' prop and displays a greeting. It includes a button that, when clicked, reveals the greeting message.

```svelte
<script>
  let { name } = $props()

  let showGreeting = $state(false)

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

<button {onclick}>Greet</button>

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

--------------------------------

### Install @testing-library/svelte

Source: https://github.com/testing-library/svelte-testing-library/blob/main/README.md

Installs the @testing-library/svelte package as a development dependency. This library provides utilities for testing Svelte components and supports Svelte versions 3, 4, and 5. It's recommended to also install @testing-library/jest-dom for custom matchers.

```shell
npm install --save-dev @testing-library/svelte
```

--------------------------------

### Update Documentation

Source: https://github.com/testing-library/svelte-testing-library/blob/main/CONTRIBUTING.md

Use the 'docs' script to ensure the README's table of contents is up to date. The 'contributors:add' script adds a contributor to the README, and 'contributors:generate' ensures the contributor list is current.

```shell
npm run docs
npm run contributors:add
npm run contributors:generate
```

--------------------------------

### Svelte Component Test: Basic Greeting

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/basic/readme.md

Tests for the Svelte greeting component, verifying initial state and behavior after user interaction. It uses @testing-library/svelte for rendering and querying, and @testing-library/user-event for simulating clicks.

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

import Subject from './basic.svelte'

test('no initial greeting', () => {
  render(Subject, { 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(Subject, { name: 'World' })

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

  expect(greeting).toBeInTheDocument()
})
```

--------------------------------

### Run Unit Tests

Source: https://github.com/testing-library/svelte-testing-library/blob/main/CONTRIBUTING.md

Execute unit tests once or in watch mode for continuous testing. The 'test' script runs tests once, while 'test:watch' keeps tests running and re-runs them on file changes.

```shell
npm test
npm run test:watch
```

--------------------------------

### Add svelteTesting Plugin to Vite Config

Source: https://github.com/testing-library/svelte-testing-library/blob/main/README.md

Integrates the svelteTesting plugin into your Vite configuration to enable testing utilities. This setup requires `@sveltejs/vite-plugin-svelte` and `@testing-library/svelte/vite`.

```diff
  // vite.config.js
  import { svelte } from '@sveltejs/vite-plugin-svelte'
+ import { svelteTesting } from '@testing-library/svelte/vite'

  export default defineConfig({
    plugins: [
      svelte(),
+     svelteTesting(),
    ]
  });
```

--------------------------------

### Svelte Component: Bindable Prop Example

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/binds/readme.md

A Svelte component demonstrating the use of `$bindable()` for two-way data binding. It includes a script section to define the bindable prop and an input element that binds to this prop.

```svelte
<script>
  let { value = $bindable('') } = $props()
</script>

<input type="text" bind:value />
```

--------------------------------

### Svelte Component Using Context

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/contexts/readme.md

This Svelte component demonstrates how to consume context data using the `getContext` function from 'svelte'. It expects a context named 'messages' and iterates over its 'current' property to display messages.

```svelte
<script>
  import { getContext } from 'svelte'

  let { label } = $props()

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

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

--------------------------------

### Render Svelte Component with Context

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/contexts/readme.md

This JavaScript test file demonstrates how to render a Svelte component using svelte-testing-library and inject context data. It shows passing a `Map` object to the `context` option during the `render` call, enabling the component to access shared state.

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

import Subject from './context.svelte'

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

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

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

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

--------------------------------

### Test Complex Svelte Snippet using createRawSnippet API

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/snippets/readme.md

Illustrates testing more complex Svelte snippets, specifically those using `createRawSnippet` to check arguments passed to slots. This example uses `@testing-library/svelte`, `svelte`, and `vitest`.

```svelte
<script>
  let { name, message } = $props()

  const greeting = $derived(`Hello, ${name}!`)
</script>

<p>
  {@render message?.(greeting)}
</p>
```

```js
import { render, screen } from '@testing-library/svelte'
import { createRawSnippet } from 'svelte'
import { expect, test } from 'vitest'

import Subject from './complex-snippet.svelte'

test('renders greeting in message snippet', () => {
  render(Subject, {
    name: 'Alice',
    message: createRawSnippet((greeting) => ({
      render: () => `<span data-testid="message">${greeting()}</span>`,
    })),
  })

  const message = screen.getByTestId('message')

  expect(message).toHaveTextContent('Hello, Alice!')
})
```

--------------------------------

### Test Basic Svelte Snippet with Wrapper Component

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/snippets/readme.md

Demonstrates testing a basic Svelte snippet by rendering a wrapper component with dummy children. It uses `data-testid` for slot testing and relies on `@testing-library/svelte` and `vitest`.

```svelte
<script>
  let { children } = $props()
</script>

<h1>
  {@render children?.()}
</h1>
```

```svelte
<script>
  import Subject from './basic-snippet.svelte'
</script>

<Subject>
  <span data-testid="child"></span>
</Subject>
```

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

import SubjectTest from './basic-snippet.test.svelte'

test('basic snippet', () => {
  render(SubjectTest)

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

  expect(child).toBeInTheDocument()
})
```

--------------------------------

### Svelte Component for Event Testing

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/events/readme.md

A simple Svelte component with an `onclick` prop that can be triggered by user interaction. It demonstrates how to bind props to DOM events.

```svelte
<script>
  let { onclick } = $props()
</script>

<button {onclick}>click me</button>
```

--------------------------------

### Svelte Component: Value/Callback Props Alternative

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/binds/readme.md

An alternative Svelte component design that avoids two-way binding by using a value prop for data input and an onInput callback prop for outputting changes. This pattern is generally easier to test.

```svelte
<script>
  let { value, onInput } = $props()

  const oninput = (event) => {
    onInput(event.target.value)
  }
</script>

<input type="text" {value} {oninput} />
```

--------------------------------

### Vitest Test for Component Event Handling

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/events/readme.md

This test uses Svelte Testing Library and Vitest to render a Svelte component and simulate a user click event. It verifies that the `onclick` handler (a spy function) is called exactly once.

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

import Subject from './event.svelte'

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

  render(Subject, { onclick })

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

  expect(onclick).toHaveBeenCalledOnce()
})
```

--------------------------------

### Test: Svelte Bindable Prop Value Binding with Vitest

Source: https://github.com/testing-library/svelte-testing-library/blob/main/examples/binds/readme.md

A test case written using Vitest and Svelte Testing Library to verify the two-way data binding functionality of a Svelte component. It simulates user input and asserts that the bound value is updated correctly.

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

import Subject from './bind.svelte'

test('value binding', async () => {
  const user = userEvent.setup()
  let value = ''

  render(Subject, {
    get value() {
      return value
    },
    set value(nextValue) {
      value = nextValue
    },
  })

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

  expect(value).toBe('hello world')
})
```

--------------------------------

### Disable Auto-Cleanup in Vite svelteTesting Plugin

Source: https://github.com/testing-library/svelte-testing-library/blob/main/README.md

Shows how to configure the `svelteTesting` Vite plugin to disable its automatic test environment cleanup feature. This is achieved by setting the `autoCleanup` option to `false` within the plugin configuration.

```javascript
svelteTesting({ autoCleanup: false })
```

--------------------------------

### Disable Auto-Cleanup in Jest via Environment Variable

Source: https://github.com/testing-library/svelte-testing-library/blob/main/README.md

Illustrates how to prevent automatic test environment cleanup in Jest and other frameworks that use global test hooks. This is done by setting the `STL_SKIP_AUTO_CLEANUP` environment variable to `1`.

```shell
STL_SKIP_AUTO_CLEANUP=1 jest
```