fix!: align target and baseElement options with testing-library (#325)

Fixes #312, fixes #313

BREAKING CHANGES: The `container` option has been renamed to `baseElement`,
  `result.container` is now set to `target` rather than `baseElement`,
  and `render` will now throw if you mix props with the `target` option.

Author: mcous

.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
   plugins: ['svelte', 'simple-import-sort', 'json-files'],
   rules: {
     'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
   },
   overrides: [
     {

src/__tests__/__snapshots__/render.test.js.snap

@@ -6,19 +6,19 @@ import Comp from './fixtures/Comp.svelte'
 
 describe('debug', () => {
   beforeEach(() => {
-    vi.spyOn(console, 'log').mockImplementation(() => { })
+    vi.spyOn(console, 'log').mockImplementation(() => {})
   })
 
   afterEach(() => {
     console.log.mockRestore()
   })
 
-  test('pretty prints the container', () => {
-    const { container, debug } = render(Comp, { props: { name: 'world' } })
+  test('pretty prints the base element', () => {
+    const { baseElement, debug } = render(Comp, { props: { name: 'world' } })
 
     debug()
 
     expect(console.log).toHaveBeenCalledTimes(1)
-    expect(console.log).toHaveBeenCalledWith(prettyDOM(container))
+    expect(console.log).toHaveBeenCalledWith(prettyDOM(baseElement))
   })
 })

src/__tests__/debug.test.js

@@ -1,23 +1,17 @@
 <svelte:options accessors />
 
 <script>
-  import { getContext } from 'svelte'
-
   export let name
 
   let buttonText = 'Button'
 
-  const contextName = getContext('name')
-
-  function handleClick () {
+  function handleClick() {
     buttonText = 'Button Clicked'
   }
 </script>
 
 <h1 data-testid="test">Hello {name}!</h1>
 
-<div>we have {contextName}</div>
-
 <button on:click={handleClick}>{buttonText}</button>
 
 <style></style>

src/__tests__/fixtures/Comp.svelte

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

src/__tests__/fixtures/Comp2.svelte

@@ -1,6 +1,6 @@
+import { render } from '@testing-library/svelte'
 import { describe, expect, test } from 'vitest'
 
-import { render } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
 
 describe('multi-base', () => {
@@ -13,11 +13,11 @@ describe('multi-base', () => {
       {
         target: treeA,
         props: {
-          name: 'Tree A'
-        }
+          name: 'Tree A',
+        },
       },
       {
-        container: treeA
+        baseElement: treeA,
       }
     )
 
@@ -26,11 +26,11 @@ describe('multi-base', () => {
       {
         target: treeB,
         props: {
-          name: 'Tree B'
-        }
+          name: 'Tree B',
+        },
       },
       {
-        container: treeB
+        baseElement: treeB,
       }
     )
 

src/__tests__/fixtures/Rerender.svelte

@@ -1,123 +1,88 @@
+import { render } from '@testing-library/svelte'
 import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-import { beforeEach, describe, expect, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
-import { act, render as stlRender } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
-import CompDefault from './fixtures/Comp2.svelte'
 
 describe('render', () => {
-  let props
-
-  const render = (additional = {}) => {
-    return stlRender(Comp, {
-      target: document.body,
-      props,
-      ...additional,
-    })
-  }
-
-  beforeEach(() => {
-    props = {
-      name: 'World',
-    }
-  })
+  const props = { name: 'World' }
 
   test('renders component into the document', () => {
-    const { getByText } = render()
+    const { getByText } = render(Comp, { props })
 
     expect(getByText('Hello World!')).toBeInTheDocument()
   })
 
-  // Dear reader, this is not something you generally want to do in your tests.
-  test('programmatically change props', async () => {
-    const { component, getByText } = render()
-
+  test('accepts props directly', () => {
+    const { getByText } = render(Comp, props)
     expect(getByText('Hello World!')).toBeInTheDocument()
-
-    await act(() => {
-      component.$set({ name: 'Worlds' })
-    })
-
-    expect(getByText('Hello Worlds!')).toBeInTheDocument()
   })
 
-  test('change props with accessors', async () => {
-    const { component, getByText } = render(
-      SVELTE_VERSION < '5' ? { accessors: true } : {}
-    )
-
-    expect(getByText('Hello World!')).toBeInTheDocument()
-
-    expect(component.name).toBe('World')
-
-    await act(() => {
-      component.value = 'Planet'
-    })
-
-    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('should accept props directly', () => {
-    const { getByText } = stlRender(Comp, { name: 'World' })
-    expect(getByText('Hello World!')).toBeInTheDocument()
+  test('throws error when mixing target option and props', () => {
+    expect(() => {
+      render(Comp, { target: document.createElement('div'), name: 'World' })
+    }).toThrow(/Unknown options/)
   })
 
-  test.runIf(SVELTE_VERSION < '5')(
-    'should accept svelte v4 component options',
-    () => {
-      const target = document.createElement('div')
-      const div = document.createElement('div')
-      document.body.appendChild(target)
-      target.appendChild(div)
-      const { container } = stlRender(Comp, {
-        target,
-        anchor: div,
-        props: { name: 'World' },
-        context: new Map([['name', 'context']]),
-      })
-      expect(container).toMatchSnapshot()
-    }
-  )
-
-  test.runIf(SVELTE_VERSION >= '5')(
-    'should accept svelte v5 component options',
-    () => {
-      const target = document.createElement('section')
-      document.body.appendChild(target)
-
-      const { container } = stlRender(Comp, {
-        target,
-        props: { name: 'World' },
-        context: new Map([['name', 'context']]),
-      })
-      expect(container).toMatchSnapshot()
-    }
-  )
+  test('should return a container object wrapping the DOM of the rendered component', () => {
+    const { container, getByTestId } = render(Comp, props)
+    const firstElement = getByTestId('test')
 
-  test('should throw error when mixing svelte component options and props', () => {
-    expect(() => {
-      stlRender(Comp, { props: {}, name: 'World' })
-    }).toThrow(/Unknown options were found/)
+    expect(container.firstChild).toBe(firstElement)
   })
 
-  test('should return a container object, which contains the DOM of the rendered component', () => {
-    const { container } = render()
+  test('should return a baseElement object, which holds the container', () => {
+    const { baseElement, container } = render(Comp, props)
 
-    expect(container.innerHTML).toBe(document.body.innerHTML)
+    expect(baseElement).toBe(document.body)
+    expect(baseElement.firstChild).toBe(container)
   })
 
-  test('correctly find component constructor on the default property', () => {
-    const { getByText } = stlRender(CompDefault, { props: { name: 'World' } })
+  test('if target is provided, use it as container and baseElement', () => {
+    const target = document.createElement('div')
+    const { baseElement, container } = render(Comp, { props, target })
 
-    expect(getByText('Hello World!')).toBeInTheDocument()
+    expect(container).toBe(target)
+    expect(baseElement).toBe(target)
   })
 
-  test("accept the 'context' option", () => {
-    const { getByText } = stlRender(Comp, {
-      props: { name: 'Universe' },
-      context: new Map([['name', 'context']]),
-    })
+  test('allow baseElement to be specified', () => {
+    const customBaseElement = document.createElement('div')
 
-    expect(getByText('we have context')).toBeInTheDocument()
+    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)
+    }
+  )
 })