diff --git a/docs/api/index.md b/docs/api/index.md index b8a5bd61b..713331362 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -14,7 +14,7 @@ Note that when mocking dates/timers with Vitest, this must be called after ```ts interface MountingOptions { - attachTo?: HTMLElement | string + attachTo?: Element | string attrs?: Record data?: () => {} extends Data ? any : Data extends object ? Partial : any props?: (RawProps & Props) | ({} extends Props ? null : never) @@ -74,7 +74,7 @@ Specify the node to mount the component on. This is not available when using `re **Signature:** ```ts -attachTo?: HTMLElement | string +attachTo?: Element | string ``` **Details:** @@ -1882,7 +1882,7 @@ Creates a Wrapper that contains the mounted and rendered Vue component to test w ```ts interface MountingOptions { - attachTo?: HTMLElement | string + attachTo?: Element | string attrs?: Record data?: () => {} extends Data ? any : Data extends object ? Partial : any props?: (RawProps & Props) | ({} extends Props ? null : never) diff --git a/docs/fr/api/index.md b/docs/fr/api/index.md index eafb8e41e..dfb24dfbd 100644 --- a/docs/fr/api/index.md +++ b/docs/fr/api/index.md @@ -12,7 +12,7 @@ Crée un `Wrapper` qui contient le composant Vue monté et rendu pour le test. ```ts interface MountingOptions { - attachTo?: HTMLElement | string + attachTo?: Element | string attrs?: Record data?: () => {} extends Data ? any : Data extends object ? Partial : any props?: (RawProps & Props) | ({} extends Props ? null : never) @@ -72,7 +72,7 @@ Spécifie le nœud où monter le composant. **Signature :** ```ts -attachTo?: HTMLElement | string +attachTo?: Element | string ``` **Utilisation :** @@ -1870,7 +1870,7 @@ Crée un `Wrapper` qui contient le composant Vue monté et rendu pour le tester ```ts interface MountingOptions { - attachTo?: HTMLElement | string + attachTo?: Element | string attrs?: Record data?: () => {} extends Data ? any : Data extends object ? Partial : any props?: (RawProps & Props) | ({} extends Props ? null : never) diff --git a/src/types.ts b/src/types.ts index 8202d8d3d..282abb96a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -91,7 +91,7 @@ export interface MountingOptions * Can be a valid CSS selector, or an Element connected to the document. * @see https://test-utils.vuejs.org/api/#attachto */ - attachTo?: HTMLElement | string + attachTo?: Element | string } /** diff --git a/tests/mountingOptions/attachTo.spec.ts b/tests/mountingOptions/attachTo.spec.ts index d499df86b..6ceba75bd 100644 --- a/tests/mountingOptions/attachTo.spec.ts +++ b/tests/mountingOptions/attachTo.spec.ts @@ -26,6 +26,25 @@ describe('options.attachTo', () => { wrapper.unmount() expect(document.getElementById('attach-to')).toBeNull() }) + it('attaches to a provided SVGElement', () => { + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') + svg.id = 'root' + document.body.appendChild(svg) + expect(document.getElementById('root')).not.toBeNull() + expect(document.getElementById('attach-to')).toBeNull() + const wrapper = mount(TestComponent, { + attachTo: svg + }) + + const root = document.getElementById('root') + const rendered = document.getElementById('attach-to')! + expect(wrapper.vm.$el.parentNode).not.toBeNull() + expect(root).not.toBeNull() + expect(rendered).not.toBeNull() + expect(rendered.outerHTML).toBe(outerHTML) + wrapper.unmount() + expect(document.getElementById('attach-to')).toBeNull() + }) it('attaches to a provided CSS selector string', () => { const div = document.createElement('div') div.id = 'root'