ease setting up tests

Author: ph-fritsche

tests/_helpers/elements/index.ts

@@ -0,0 +1,21 @@
+import {ShadowInput} from './shadow-input'
+
+const customElements = {
+  'shadow-input': ShadowInput,
+}
+
+export type CustomElements = {
+  [k in keyof typeof customElements]: typeof customElements[k] extends {
+    new (): infer T
+  }
+    ? T
+    : never
+}
+
+export function registerCustomElements() {
+  Object.entries(customElements).forEach(([name, constructor]) => {
+    if (!globalThis.customElements.get(name)) {
+      globalThis.customElements.define(name, constructor)
+    }
+  })
+}

tests/_helpers/shadow-input.ts renamed to tests/_helpers/elements/shadow-input.ts

@@ -5,7 +5,7 @@ template.innerHTML = `
   <input>
 `
 
-class ShadowInput extends HTMLElement {
+export class ShadowInput extends HTMLElement {
   private $input?: HTMLInputElement
 
   static getObservedAttributes() {
@@ -40,11 +40,3 @@ class ShadowInput extends HTMLElement {
     return this.$input?.value ?? ''
   }
 }
-
-export type {ShadowInput}
-
-export function defineShadowInputCustomElementIfNotDefined() {
-  if (window.customElements.get('shadow-input') === undefined) {
-    window.customElements.define('shadow-input', ShadowInput)
-  }
-}

tests/_helpers/index.ts

@@ -1,5 +1,21 @@
+import {CustomElements, registerCustomElements} from './elements'
+
 // this is pretty helpful:
 // https://codesandbox.io/s/quizzical-worker-eo909
 
+expect.addSnapshotSerializer({
+  test: (val: unknown) =>
+    Boolean(
+      typeof val === 'object'
+        ? Object.prototype.hasOwnProperty.call(val, 'snapshot')
+        : false,
+    ),
+  print: val => String((<null | {snapshot?: string}>val)?.snapshot),
+})
+
+registerCustomElements()
+
+export type {CustomElements}
+
 export {render, setup} from './setup'
 export {addEventListener, addListeners} from './listeners'

tests/clipboard/copy.ts

@@ -1,4 +1,3 @@
-import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input'
 import userEvent from '#src'
 import {render, setup} from '#testHelpers'
 
@@ -102,7 +101,6 @@ describe('without Clipboard API', () => {
 
 describe('on shadow DOM', () => {
   test('copy in an input element', async () => {
-    defineShadowInputCustomElementIfNotDefined()
     const {user} = setup('<shadow-input value="test"></shadow-input>', {
       selection: {anchorOffset: 0, focusOffset: 4},
     })

tests/clipboard/cut.ts

@@ -1,5 +1,4 @@
-import type {ShadowInput} from '../_helpers/shadow-input'
-import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input'
+import type {ShadowInput} from '../_helpers/elements/shadow-input'
 import userEvent from '#src'
 import {render, setup} from '#testHelpers'
 
@@ -110,7 +109,6 @@ describe('without Clipboard API', () => {
 })
 describe('on shadow DOM', () => {
   test('cut in an input element', async () => {
-    defineShadowInputCustomElementIfNotDefined()
     const {element, user} = setup<ShadowInput>(
       '<shadow-input value="test"></shadow-input>',
       {

tests/clipboard/paste.ts

@@ -1,7 +1,5 @@
-import type {ShadowInput} from '../_helpers/shadow-input'
-import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input'
 import userEvent from '#src'
-import {render, setup} from '#testHelpers'
+import {CustomElements, render, setup} from '#testHelpers'
 import {createDataTransfer} from '#src/utils'
 
 test('paste with empty clipboard', async () => {
@@ -154,8 +152,9 @@ describe('without Clipboard API', () => {
 
 describe('on shadow DOM', () => {
   test('paste into an input element', async () => {
-    defineShadowInputCustomElementIfNotDefined()
-    const {element, user} = setup<ShadowInput>('<shadow-input></shadow-input>')
+    const {element, user} = setup<CustomElements['shadow-input']>(
+      '<shadow-input></shadow-input>',
+    )
 
     await user.paste('test')
 

tests/keyboard/index.ts

@@ -1,9 +1,5 @@
 import userEvent from '#src'
-import {addListeners, render, setup} from '#testHelpers'
-import {
-  defineShadowInputCustomElementIfNotDefined,
-  ShadowInput,
-} from '../_helpers/shadow-input'
+import {addListeners, CustomElements, render, setup} from '#testHelpers'
 
 test('type without focus', async () => {
   const {element, user} = setup('<input/>', {focus: false})
@@ -170,8 +166,9 @@ test('disabling activeElement moves action to HTMLBodyElement', async () => {
 
 describe('on shadow DOM', () => {
   test('type into an input element', async () => {
-    defineShadowInputCustomElementIfNotDefined()
-    const {element, user} = setup<ShadowInput>('<shadow-input></shadow-input>')
+    const {element, user} = setup<CustomElements['shadow-input']>(
+      '<shadow-input></shadow-input>',
+    )
 
     await user.keyboard('test')
 

tests/utils/focus/getActiveElement.ts

@@ -1,4 +1,3 @@
-import {defineShadowInputCustomElementIfNotDefined} from '../../_helpers/shadow-input'
 import {setup} from '#testHelpers'
 import {getActiveElementOrBody} from '#src/utils'
 
@@ -16,7 +15,6 @@ test('default to body as active element', async () => {
 
 describe('on shadow DOM', () => {
   test('get focused element inside shadow tree', async () => {
-    defineShadowInputCustomElementIfNotDefined()
     const {element} = setup('<shadow-input></shadow-input>')
 
     expect(getActiveElementOrBody(document)).toBe(