fix: return wrapper error from DOMWrapper ctor if element is nullish (fixes #1984) (#1996)

Author: ascott18

docs/guide/extending-vtu/plugins.md

@@ -109,11 +109,7 @@ const DataTestIdPlugin = (wrapper) => {
   function findByTestId(selector) {
     const dataSelector = `[data-testid='${selector}']`
     const element = wrapper.element.querySelector(dataSelector)
-    if (element) {
-      return new DOMWrapper(element)
-    }
-
-    return createWrapperError('DOMWrapper')
+    return new DOMWrapper(element)
   }
 
   return {

src/domWrapper.ts

@@ -11,7 +11,10 @@ import { isRefSelector } from './utils'
 import { createWrapperError } from './errorWrapper'
 
 export class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> {
-  constructor(element: NodeType) {
+  constructor(element: NodeType | null | undefined) {
+    if (!element) {
+      return createWrapperError('DOMWrapper')
+    }
     super(element)
     // plugins hook
     config.plugins.DOMWrapper.extend(this)

src/wrapperFactory.ts

@@ -7,7 +7,9 @@ export enum WrapperType {
   VueWrapper
 }
 
-type DOMWrapperFactory = <T extends Node>(element: T) => DOMWrapperType<T>
+type DOMWrapperFactory = <T extends Node>(
+  element: T | null | undefined
+) => DOMWrapperType<T>
 type VueWrapperFactory = <T extends ComponentPublicInstance>(
   app: App | null,
   vm: T,

tests/exists.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { h, defineComponent } from 'vue'
 
-import { mount } from '../src'
+import { DOMWrapper, mount } from '../src'
 
 describe('exists', () => {
   it('returns false when element does not exist', () => {
@@ -50,4 +50,9 @@ describe('exists', () => {
     await wrapper.setProps({ hide: true })
     expect(child.exists()).toBe(false)
   })
+
+  it('returns false when wrapper is manually constructed against nullish element', () => {
+    const wrapper = new DOMWrapper(null)
+    expect(wrapper.exists()).toBe(false)
+  })
 })