feat: Add extra error messages when screen was passed instead of a DOM element (#949)

Co-authored-by: Sebastian Silbermann <[email protected]>
Co-authored-by: Tim Deschryver <[email protected]>

Author: 3 people

src/__tests__/helpers.js

@@ -1,3 +1,4 @@
+import {screen} from '../'
 import {
   getDocument,
   getWindowFromNode,
@@ -10,6 +11,13 @@ test('returns global document if exists', () => {
 })
 
 describe('window retrieval throws when given something other than a node', () => {
+  // we had an issue when user insert screen instead of query
+  // actually here should be another more clear error output
+  test('screen as node', () => {
+    expect(() => getWindowFromNode(screen)).toThrowErrorMatchingInlineSnapshot(
+      `"It looks like you passed a \`screen\` object. Did you do something like \`fireEvent.click(screen, ...\` when you meant to use a query, e.g. \`fireEvent.click(screen.getBy..., \`?"`,
+    )
+  })
   test('Promise as node', () => {
     expect(() =>
       getWindowFromNode(new Promise(jest.fn())),

src/helpers.js

@@ -105,6 +105,13 @@ function getWindowFromNode(node) {
     throw new Error(
       `It looks like you passed an Array instead of a DOM node. Did you do something like \`fireEvent.click(screen.getAllBy...\` when you meant to use a \`getBy\` query \`fireEvent.click(screen.getBy...\`?`,
     )
+  } else if (
+    typeof node.debug === 'function' &&
+    typeof node.logTestingPlaygroundURL === 'function'
+  ) {
+    throw new Error(
+      `It looks like you passed a \`screen\` object. Did you do something like \`fireEvent.click(screen, ...\` when you meant to use a query, e.g. \`fireEvent.click(screen.getBy..., \`?`,
+    )
   } else {
     // The user passed something unusual to a calling function
     throw new Error(