all tests pass

Author: yanick

src/__tests__/fixtures/Comp.svelte

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

src/__tests__/render.test.js

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

src/__tests__/render.test.js.orig

@@ -6,7 +6,7 @@ import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 
 import { act, screen, render, waitFor } from '@testing-library/svelte'
 
-import Comp from './fixtures/Rerender.svelte'
+import Comp from './fixtures/Comp.svelte'
 
 describe('rerender', () => {
   test('updates props', async () => {

src/__tests__/rerender.test.js

@@ -48,25 +48,32 @@ export class SvelteTestingLibrary {
     return { props: options }
   }
 
-  render(Component, { target, ...options } = {}, { container, queries } = {}) {
-    container = container || document.body
-    target = target || container.appendChild(document.createElement('div'))
+  render(Component, componentOptions = {}, renderOptions = {}) {
+    componentOptions = this.checkProps(componentOptions)
+
+    const baseElement =
+      renderOptions.baseElement ?? componentOptions.target ?? document.body
+
+    const target =
+      componentOptions.target ??
+      baseElement.appendChild(document.createElement('div'))
+
     this.targetCache.add(target)
 
-    const ComponentConstructor = Component.default || Component
+    const ComponentConstructor = Component?.default ?? Component
 
-    const component = this.renderComponent(
-      {
-        target,
-        ComponentConstructor,
-      },
-      options
-    )
+    const component = this.renderComponent(ComponentConstructor, {
+      ...componentOptions,
+      target,
+    })
+
+    this.componentCache.add(component)
 
     return {
-      container,
+      baseElement,
+      container: target,
       component,
-      debug: (el = container) => console.log(prettyDOM(el)),
+      debug: (el = baseElement) => console.log(prettyDOM(el)),
       rerender: async (props) => {
         if (props.props) {
           console.warn(
@@ -80,20 +87,16 @@ export class SvelteTestingLibrary {
       unmount: () => {
         this.cleanupComponent(component)
       },
-      ...getQueriesForElement(container, queries),
+      ...getQueriesForElement(baseElement, renderOptions.queries),
     }
   }
 
-  renderComponent({ target, ComponentConstructor }, options) {
-    options = { target, ...this.checkProps(options) }
-
+  renderComponent(ComponentConstructor, options) {
     if (IS_SVELTE_5)
       throw new Error('for Svelte 5, use `@testing-library/svelte/svelte5`')
 
     const component = new ComponentConstructor(options)
 
-    this.componentCache.add(component)
-
     // TODO(mcous, 2024-02-11): remove this behavior in the next major version
     // It is unnecessary has no path to implementation in Svelte v5
     if (!IS_SVELTE_5) {