@testing-library/svelte 5.1.0 → 5.2.0-next.2

package/src/__tests__/auto-cleanup.test.js

@@ -1,31 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('auto-cleanup', () => {
-  // This just verifies that by importing STL in an
-  // environment which supports afterEach (like jest)
-  // we'll get automatic cleanup between tests.
-  test('first', () => {
-    render(Comp, { props: { name: 'world' } })
-  })
-
-  test('second', () => {
-    expect(document.body.innerHTML).toEqual('')
-  })
-})
-
-describe('cleanup of two components', () => {
-  // This just verifies that by importing STL in an
-  // environment which supports afterEach (like jest)
-  // we'll get automatic cleanup between tests.
-  test('first', () => {
-    render(Comp, { props: { name: 'world' } })
-    render(Comp, { props: { name: 'universe' } })
-  })
-
-  test('second', () => {
-    expect(document.body.innerHTML).toEqual('')
-  })
-})

package/src/__tests__/cleanup.test.js

@@ -1,35 +0,0 @@
-import { cleanup, render } from '@testing-library/svelte'
-import { describe, expect, test, vi } from 'vitest'
-
-import Mounter from './fixtures/Mounter.svelte'
-
-const onExecuted = vi.fn()
-const onDestroyed = vi.fn()
-const renderSubject = () => render(Mounter, { onExecuted, onDestroyed })
-
-describe('cleanup', () => {
-  test('cleanup deletes element', async () => {
-    renderSubject()
-    cleanup()
-
-    expect(document.body).toBeEmptyDOMElement()
-  })
-
-  test('cleanup unmounts component', () => {
-    renderSubject()
-    cleanup()
-
-    expect(onDestroyed).toHaveBeenCalledOnce()
-  })
-
-  test('cleanup handles unexpected errors during mount', () => {
-    onExecuted.mockImplementation(() => {
-      throw new Error('oh no!')
-    })
-
-    expect(renderSubject).toThrowError()
-    cleanup()
-
-    expect(document.body).toBeEmptyDOMElement()
-  })
-})

package/src/__tests__/context.test.js

@@ -1,14 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { expect, test } from 'vitest'
-
-import Comp from './fixtures/Context.svelte'
-
-test('can set a context', () => {
-  const message = 'Got it'
-
-  const { getByText } = render(Comp, {
-    context: new Map(Object.entries({ foo: { message } })),
-  })
-
-  expect(getByText(message)).toBeTruthy()
-})

package/src/__tests__/debug.test.js

@@ -1,18 +0,0 @@
-import { prettyDOM } from '@testing-library/dom'
-import { render } from '@testing-library/svelte'
-import { describe, expect, test, vi } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('debug', () => {
-  test('pretty prints the base element', () => {
-    vi.stubGlobal('console', { log: vi.fn(), warn: vi.fn(), error: vi.fn() })
-
-    const { baseElement, debug } = render(Comp, { props: { name: 'world' } })
-
-    debug()
-
-    expect(console.log).toHaveBeenCalledTimes(1)
-    expect(console.log).toHaveBeenCalledWith(prettyDOM(baseElement))
-  })
-})

package/src/__tests__/events.test.js

@@ -1,32 +0,0 @@
-import { fireEvent, render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('events', () => {
-  test('state changes are flushed after firing an event', async () => {
-    const { getByText } = render(Comp, { props: { name: 'World' } })
-    const button = getByText('Button')
-
-    const result = fireEvent.click(button)
-
-    await expect(result).resolves.toBe(true)
-    expect(button).toHaveTextContent('Button Clicked')
-  })
-
-  test('calling `fireEvent` directly works too', async () => {
-    const { getByText } = render(Comp, { props: { name: 'World' } })
-    const button = getByText('Button')
-
-    const result = fireEvent(
-      button,
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-
-    await expect(result).resolves.toBe(true)
-    expect(button).toHaveTextContent('Button Clicked')
-  })
-})

package/src/__tests__/fixtures/Comp.svelte

@@ -1,17 +0,0 @@
-<svelte:options accessors />
-
-<script>
-  export let name = 'World'
-
-  let buttonText = 'Button'
-
-  function handleClick() {
-    buttonText = 'Button Clicked'
-  }
-</script>
-
-<h1 data-testid="test">Hello {name}!</h1>
-
-<button on:click={handleClick}>{buttonText}</button>
-
-<style></style>

package/src/__tests__/fixtures/Context.svelte

@@ -1,7 +0,0 @@
-<script>
-  import { getContext } from 'svelte'
-
-  const ctx = getContext('foo')
-</script>
-
-<div>{ctx.message}</div>

package/src/__tests__/fixtures/Mounter.svelte

@@ -1,19 +0,0 @@
-<script>
-  import { onDestroy, onMount } from 'svelte'
-
-  export let onExecuted = undefined
-  export let onMounted = undefined
-  export let onDestroyed = undefined
-
-  onExecuted?.()
-
-  onMount(() => {
-    onMounted?.()
-  })
-
-  onDestroy(() => {
-    onDestroyed?.()
-  })
-</script>
-
-<button />

package/src/__tests__/fixtures/Simple.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  export let name: string
-  export let count: number
-</script>
-
-<h1>hello {name}</h1>
-<p>count: {count}</p>

package/src/__tests__/fixtures/Transitioner.svelte

@@ -1,18 +0,0 @@
-<script>
-  import { blur } from 'svelte/transition'
-
-  let show = false
-  let introDone = false
-</script>
-
-<button on:click={() => (show = true)}>Show</button>
-
-{#if show}
-  <div in:blur={{ duration: 64 }} on:introend={() => (introDone = true)}>
-    {#if introDone}
-      <p data-testid="intro-done">Done</p>
-    {:else}
-      <p data-testid="intro-pending">Pending</p>
-    {/if}
-  </div>
-{/if}

package/src/__tests__/mount.test.js

@@ -1,33 +0,0 @@
-import { act, render, screen } from '@testing-library/svelte'
-import { describe, expect, test, vi } from 'vitest'
-
-import Mounter from './fixtures/Mounter.svelte'
-
-const onMounted = vi.fn()
-const onDestroyed = vi.fn()
-const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
-
-describe('mount and destroy', () => {
-  test('component is mounted', async () => {
-    renderSubject()
-
-    const content = screen.getByRole('button')
-
-    expect(content).toBeInTheDocument()
-    await act()
-    expect(onMounted).toHaveBeenCalledOnce()
-  })
-
-  test('component is destroyed', async () => {
-    const { unmount } = renderSubject()
-
-    await act()
-    unmount()
-
-    const content = screen.queryByRole('button')
-
-    expect(content).not.toBeInTheDocument()
-    await act()
-    expect(onDestroyed).toHaveBeenCalledOnce()
-  })
-})

package/src/__tests__/multi-base.test.js

@@ -1,42 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('multi-base', () => {
-  const treeA = document.createElement('div')
-  const treeB = document.createElement('div')
-
-  test('container isolates trees from one another', () => {
-    const { getByText: getByTextInA } = render(
-      Comp,
-      {
-        target: treeA,
-        props: {
-          name: 'Tree A',
-        },
-      },
-      {
-        baseElement: treeA,
-      }
-    )
-
-    const { getByText: getByTextInB } = render(
-      Comp,
-      {
-        target: treeB,
-        props: {
-          name: 'Tree B',
-        },
-      },
-      {
-        baseElement: treeB,
-      }
-    )
-
-    expect(() => getByTextInA('Hello Tree A!')).not.toThrow()
-    expect(() => getByTextInB('Hello Tree A!')).toThrow()
-    expect(() => getByTextInA('Hello Tree B!')).toThrow()
-    expect(() => getByTextInB('Hello Tree B!')).not.toThrow()
-  })
-})

package/src/__tests__/render.test.js

@@ -1,85 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-import { IS_SVELTE_5 } from './utils.js'
-
-describe('render', () => {
-  const props = { name: 'World' }
-
-  test('renders component into the document', () => {
-    const { getByText } = render(Comp, { props })
-
-    expect(getByText('Hello World!')).toBeInTheDocument()
-  })
-
-  test('accepts props directly', () => {
-    const { getByText } = render(Comp, props)
-    expect(getByText('Hello World!')).toBeInTheDocument()
-  })
-
-  test('throws error when mixing svelte component options and props', () => {
-    expect(() => {
-      render(Comp, { props, name: 'World' })
-    }).toThrow(/Unknown options/)
-  })
-
-  test('throws error when mixing target option and props', () => {
-    expect(() => {
-      render(Comp, { target: document.createElement('div'), name: 'World' })
-    }).toThrow(/Unknown options/)
-  })
-
-  test('should return a container object wrapping the DOM of the rendered component', () => {
-    const { container, getByTestId } = render(Comp, props)
-    const firstElement = getByTestId('test')
-
-    expect(container.firstChild).toBe(firstElement)
-  })
-
-  test('should return a baseElement object, which holds the container', () => {
-    const { baseElement, container } = render(Comp, props)
-
-    expect(baseElement).toBe(document.body)
-    expect(baseElement.firstChild).toBe(container)
-  })
-
-  test('if target is provided, use it as container and baseElement', () => {
-    const target = document.createElement('div')
-    const { baseElement, container } = render(Comp, { props, target })
-
-    expect(container).toBe(target)
-    expect(baseElement).toBe(target)
-  })
-
-  test('allow baseElement to be specified', () => {
-    const customBaseElement = document.createElement('div')
-
-    const { baseElement, container } = render(
-      Comp,
-      { props },
-      { baseElement: customBaseElement }
-    )
-
-    expect(baseElement).toBe(customBaseElement)
-    expect(baseElement.firstChild).toBe(container)
-  })
-
-  test.skipIf(IS_SVELTE_5)('should accept anchor option in Svelte v4', () => {
-    const baseElement = document.body
-    const target = document.createElement('section')
-    const anchor = document.createElement('div')
-    baseElement.appendChild(target)
-    target.appendChild(anchor)
-
-    const { getByTestId } = render(
-      Comp,
-      { props, target, anchor },
-      { baseElement }
-    )
-    const firstElement = getByTestId('test')
-
-    expect(target.firstChild).toBe(firstElement)
-    expect(target.lastChild).toBe(anchor)
-  })
-})

package/src/__tests__/rerender.test.js

@@ -1,50 +0,0 @@
-import { act, render, screen } from '@testing-library/svelte'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-import { describe, expect, test, vi } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('rerender', () => {
-  test('updates props', async () => {
-    const { rerender } = render(Comp, { name: 'World' })
-    const element = screen.getByText('Hello World!')
-
-    await rerender({ name: 'Dolly' })
-
-    expect(element).toHaveTextContent('Hello Dolly!')
-  })
-
-  test('warns if incorrect arguments shape used', async () => {
-    vi.stubGlobal('console', { log: vi.fn(), warn: vi.fn(), error: vi.fn() })
-
-    const { rerender } = render(Comp, { name: 'World' })
-    const element = screen.getByText('Hello World!')
-
-    await rerender({ props: { name: 'Dolly' } })
-
-    expect(element).toHaveTextContent('Hello Dolly!')
-    expect(console.warn).toHaveBeenCalledOnce()
-    expect(console.warn).toHaveBeenCalledWith(
-      expect.stringMatching(/deprecated/iu)
-    )
-  })
-
-  test('change props with accessors', async () => {
-    const { component, getByText } = render(
-      Comp,
-      SVELTE_VERSION < '5'
-        ? { accessors: true, props: { name: 'World' } }
-        : { name: 'World' }
-    )
-    const element = getByText('Hello World!')
-
-    expect(element).toBeInTheDocument()
-    expect(component.name).toBe('World')
-
-    await act(() => {
-      component.name = 'Planet'
-    })
-
-    expect(element).toHaveTextContent('Hello Planet!')
-  })
-})

package/src/__tests__/transition.test.js

@@ -1,31 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/svelte'
-import { userEvent } from '@testing-library/user-event'
-import { beforeEach, describe, expect, test, vi } from 'vitest'
-
-import Transitioner from './fixtures/Transitioner.svelte'
-import { IS_JSDOM, IS_SVELTE_5 } from './utils.js'
-
-describe.skipIf(IS_SVELTE_5)('transitions', () => {
-  beforeEach(() => {
-    if (!IS_JSDOM) return
-
-    const raf = (fn) => setTimeout(() => fn(new Date()), 16)
-    vi.stubGlobal('requestAnimationFrame', raf)
-  })
-
-  test('on:introend', async () => {
-    const user = userEvent.setup()
-
-    render(Transitioner)
-    const start = screen.getByRole('button')
-    await user.click(start)
-
-    const pending = screen.getByTestId('intro-pending')
-    expect(pending).toBeInTheDocument()
-
-    await waitFor(() => {
-      const done = screen.queryByTestId('intro-done')
-      expect(done).toBeInTheDocument()
-    })
-  })
-})

package/src/__tests__/utils.js

@@ -1,7 +0,0 @@
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-
-export const IS_JSDOM = window.navigator.userAgent.includes('jsdom')
-
-export const IS_HAPPYDOM = !IS_JSDOM // right now it's happy or js
-
-export const IS_SVELTE_5 = SVELTE_VERSION >= '5'

package/src/svelte5-index.js

@@ -1,23 +0,0 @@
-/* eslint-disable import/export */
-import { act } from './pure.js'
-import { cleanup } from './svelte5.js'
-
-// If we're running in a test runner that supports afterEach
-// then we'll automatically run cleanup afterEach test
-// this ensures that tests run in isolation from each other
-// if you don't like this then either import the `pure` module
-// or set the STL_SKIP_AUTO_CLEANUP env variable to 'true'.
-if (typeof afterEach === 'function' && !process.env.STL_SKIP_AUTO_CLEANUP) {
-  afterEach(async () => {
-    await act()
-    cleanup()
-  })
-}
-
-// export all base queries, screen, etc.
-export * from '@testing-library/dom'
-
-// export svelte-specific functions and custom `fireEvent`
-// `fireEvent` must be a named export to take priority over wildcard export above
-export { act, fireEvent } from './pure.js'
-export { cleanup, render } from './svelte5.js'

package/src/svelte5.js

@@ -1,30 +0,0 @@
-import { createClassComponent } from 'svelte/legacy'
-
-import { SvelteTestingLibrary } from './pure.js'
-
-class Svelte5TestingLibrary extends SvelteTestingLibrary {
-  svelteComponentOptions = [
-    'target',
-    'props',
-    'events',
-    'context',
-    'intro',
-    'recover',
-  ]
-
-  renderComponent(ComponentConstructor, componentOptions) {
-    const component = createClassComponent({
-      ...componentOptions,
-      component: ComponentConstructor,
-    })
-
-    this.componentCache.add(component)
-
-    return component
-  }
-}
-
-const instance = new Svelte5TestingLibrary()
-
-export const render = instance.render.bind(instance)
-export const cleanup = instance.cleanup.bind(instance)

package/types/types.test-d.ts

@@ -1,65 +0,0 @@
-import { expectTypeOf } from 'expect-type'
-import type { ComponentProps, SvelteComponent } from 'svelte'
-import { describe, test } from 'vitest'
-
-import Simple from '../src/__tests__/fixtures/Simple.svelte'
-import * as subject from './index.js'
-
-describe('types', () => {
-  test('render is a function that accepts a Svelte component', () => {
-    subject.render(Simple, { name: 'Alice', count: 42 })
-    subject.render(Simple, { props: { name: 'Alice', count: 42 } })
-  })
-
-  test('rerender is a function that accepts partial props', async () => {
-    const { rerender } = subject.render(Simple, { name: 'Alice', count: 42 })
-
-    await rerender({ name: 'Bob' })
-    await rerender({ count: 0 })
-  })
-
-  test('invalid prop types are rejected', () => {
-    // @ts-expect-error: name should be a string
-    subject.render(Simple, { name: 42 })
-
-    // @ts-expect-error: name should be a string
-    subject.render(Simple, { props: { name: 42 } })
-  })
-
-  test('render result has container and component', () => {
-    const result = subject.render(Simple, { name: 'Alice', count: 42 })
-
-    expectTypeOf(result).toMatchTypeOf<{
-      container: HTMLElement
-      component: SvelteComponent<{ name: string }>
-      debug: (el?: HTMLElement) => void
-      rerender: (props: Partial<ComponentProps<Simple>>) => Promise<void>
-      unmount: () => void
-    }>()
-  })
-
-  test('render result has default queries', () => {
-    const result = subject.render(Simple, { name: 'Alice', count: 42 })
-
-    expectTypeOf(result.getByRole).parameters.toMatchTypeOf<
-      [role: subject.ByRoleMatcher, options?: subject.ByRoleOptions]
-    >()
-  })
-
-  test('render result can have custom queries', () => {
-    const [getByVibes] = subject.buildQueries(
-      (_container: HTMLElement, vibes: string) => {
-        throw new Error(`unimplemented ${vibes}`)
-      },
-      () => '',
-      () => ''
-    )
-    const result = subject.render(
-      Simple,
-      { name: 'Alice', count: 42 },
-      { queries: { getByVibes } }
-    )
-
-    expectTypeOf(result.getByVibes).parameters.toMatchTypeOf<[vibes: string]>()
-  })
-})