wip

Author: yanick

src/__tests__/render.test.js.orig

@@ -0,0 +1,122 @@
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
+import { describe, expect, test } from 'vitest'
+
+<<<<<<< HEAD
+import { render } from '..'
+=======
+import { act, render as stlRender } from '@testing-library/svelte'
+>>>>>>> origin/next
+import Comp from './fixtures/Comp.svelte'
+
+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 component options/)
+  })
+
+  test('throws error when mixing target option and props', () => {
+    expect(() => {
+      render(Comp, { target: document.createElement('div'), name: 'World' })
+    }).toThrow(/Unknown component 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.runIf(SVELTE_VERSION < '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)
+    }
+  )
+<<<<<<< HEAD
+=======
+
+  test('should throw error when mixing svelte component options and props', () => {
+    expect(() => {
+      stlRender(Comp, { props: {}, name: 'World' })
+    }).toThrow(/Unknown options were found/)
+  })
+
+  test('should return a container object, which contains the DOM of the rendered component', () => {
+    const { container } = render()
+
+    expect(container.innerHTML).toBe(document.body.innerHTML)
+  })
+
+  test('correctly find component constructor on the default property', () => {
+    const { getByText } = stlRender(CompDefault, { props: { name: 'World' } })
+
+    expect(getByText('Hello World!')).toBeInTheDocument()
+  })
+
+  test("accept the 'context' option", () => {
+    const { getByText } = stlRender(Comp, {
+      props: { name: 'Universe' },
+      context: new Map([['name', 'context']]),
+    })
+
+    expect(getByText('we have context')).toBeInTheDocument()
+  })
+>>>>>>> origin/next
+})

src/__tests__/rerender.test.js.orig

@@ -0,0 +1,61 @@
+<<<<<<< HEAD
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
+import { describe, expect, test, vi } from 'vitest'
+
+import { act, render, screen } from '..'
+import Comp from './fixtures/Comp.svelte'
+=======
+/**
+ * @jest-environment jsdom
+ */
+import { expect, test, vi } from 'vitest'
+
+import { render, waitFor } from '@testing-library/svelte'
+
+import Comp from './fixtures/Rerender.svelte'
+>>>>>>> origin/next
+
+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', { warn: 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!')
+  })
+})

src/pure.js

@@ -5,10 +5,8 @@ import {
 } from '@testing-library/dom'
 import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import * as Svelte from 'svelte'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-
-const IS_SVELTE_5 = SVELTE_VERSION >= '5'
 
+const IS_SVELTE_5 = /^5\./.test(SVELTE_VERSION)
 export const targetCache = new Set()
 export const componentCache = new Set()
 
@@ -22,24 +20,27 @@ const svelteComponentOptions = [
 ]
 
 export const buildCheckProps = (svelteComponentOptions) => (options) => {
-  const isProps = !Object.keys(options).some((option) =>
+  const isOptions = Object.keys(options).some((option) =>
     svelteComponentOptions.includes(option)
   )
 
   // Check if any props and Svelte options were accidentally mixed.
-  if (!isProps) {
+  if (isOptions) {
     const unrecognizedOptions = Object.keys(options).filter(
       (option) => !svelteComponentOptions.includes(option)
     )
 
     if (unrecognizedOptions.length > 0) {
       throw Error(`
-          Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed
-          passing in props with Svelte options into the render function. Valid Svelte options
-          are [${svelteComponentOptions}]. You can either change the prop names, or pass in your
-          props for that component via the \`props\` option.\n\n
-          Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })\n\n
-        `)
+  Unknown component options: [${unrecognizedOptions.join(', ')}]
+  Valid Svelte component options: [${svelteComponentOptions.join(', ')}]
+
+  This error occurs if props are mixed with Svelte component options,
+  or any props use the same name as a Svelte component option.
+  Either rename the props, or place props under the \`props\` option.
+
+  Eg: const { /** results **/ } = render(MyComponent, { props: { /** props here **/ } })
+`)
     }
 
     return options
@@ -53,7 +54,7 @@ const checkProps = buildCheckProps(svelteComponentOptions)
 const buildRenderComponent =
   ({ target, ComponentConstructor }) =>
   (options) => {
-    options = { target, ...checkProps(options) }
+    options = checkProps(options)
 
     if (IS_SVELTE_5)
       throw new Error('for Svelte 5, use `@testing-library/svelte/svelte5`')
@@ -75,9 +76,13 @@ const buildRenderComponent =
 
 export const buildRender =
   (buildRenderComponent) =>
-  (Component, { target, ...options } = {}, { container, queries } = {}) => {
-    container = container || document.body
-    target = target || container.appendChild(document.createElement('div'))
+  (Component, options = {}, renderOptions = {}) => {
+    const baseElement =
+      renderOptions.baseElement ?? options.target ?? document.body
+
+    const target =
+      options.target ?? baseElement.appendChild(document.createElement('div'))
+
     targetCache.add(target)
 
     const ComponentConstructor = Component.default || Component
@@ -87,7 +92,7 @@ export const buildRender =
       ComponentConstructor,
     })
 
-    let component = renderComponent(options)
+    let component = renderComponent({ target, ...options })
 
     return {
       container,
@@ -116,11 +121,7 @@ export const cleanupComponent = (component) => {
   const inCache = componentCache.delete(component)
 
   if (inCache) {
-    if (IS_SVELTE_5) {
-      Svelte.unmount(component)
-    } else {
-      component.$destroy()
-    }
+    component.$destroy()
   }
 }