feat: Make screen compatible with document.body.replaceWith()

src/__tests__/screen.js

@@ -118,3 +118,12 @@ test('exposes debug method', () => {
 `)
   console.log.mockClear()
 })
+
+test('queries after replaceWith', async () => {
+  const newBody = document.createElement('body')
+  newBody.innerHTML = '<div>replaceWith element</div>'
+  document.body.replaceWith(newBody)
+  screen.getByText('replaceWith element')
+  await screen.findByText('replaceWith element')
+  expect(screen.queryByText('replaceWith element')).not.toBeNull()
+})

src/screen.ts

@@ -2,7 +2,6 @@
 // TODO: Statically verify we don't rely on NodeJS implicit named imports.
 import lzString from 'lz-string'
 import {type OptionsReceived} from 'pretty-format'
-import {getQueriesForElement} from './get-queries-for-element'
 import {getDocument} from './helpers'
 import {logDOM} from './pretty-dom'
 import * as queries from './queries'
@@ -46,19 +45,20 @@ const logTestingPlaygroundURL = (element = getDocument().body) => {
   return playgroundUrl
 }
 
-const initialValue = {debug, logTestingPlaygroundURL}
+const initialValue: Record<string, Function> = {debug, logTestingPlaygroundURL}
 
-export const screen =
-  typeof document !== 'undefined' && document.body // eslint-disable-line @typescript-eslint/no-unnecessary-condition
-    ? getQueriesForElement(document.body, queries, initialValue)
-    : Object.keys(queries).reduce((helpers, key) => {
-        // `key` is for all intents and purposes the type of keyof `helpers`, which itself is the type of `initialValue` plus incoming properties from `queries`
-        // if `Object.keys(something)` returned Array<keyof typeof something> this explicit type assertion would not be necessary
-        // see https://stackoverflow.com/questions/55012174/why-doesnt-object-keys-return-a-keyof-type-in-typescript
-        helpers[key as keyof typeof initialValue] = () => {
-          throw new TypeError(
-            'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error',
-          )
-        }
-        return helpers
-      }, initialValue)
+export const screen = Object.entries(queries).reduce((helpers, [key, fn]) => {
+  // `key` is for all intents and purposes the type of keyof `helpers`, which itself is the type of `initialValue` plus incoming properties from `queries`
+  // if `Object.keys(something)` returned Array<keyof typeof something> this explicit type assertion would not be necessary
+  // see https://stackoverflow.com/questions/55012174/why-doesnt-object-keys-return-a-keyof-type-in-typescript
+  helpers[key] = (...args: any[]) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (typeof document === 'undefined' || !document.body) {
+      throw new TypeError(
+        'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error',
+      )
+    }
+    return fn(document.body, ...(args as any[]))
+  }
+  return helpers
+}, initialValue)