From 0c54a889f0279eceb43748a6ab03a1de31e19c45 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Mar 2024 14:34:45 +0100 Subject: [PATCH 1/5] fix: improve error findBy* error message when screen is not beign attached. --- src/queries/__tests__/find-by.test.tsx | 19 +++++++++++++++++++ src/queries/make-queries.ts | 4 ++++ src/screen.ts | 16 ++++++++++++---- 3 files changed, 35 insertions(+), 4 deletions(-) create mode 100644 src/queries/__tests__/find-by.test.tsx diff --git a/src/queries/__tests__/find-by.test.tsx b/src/queries/__tests__/find-by.test.tsx new file mode 100644 index 000000000..62448e72a --- /dev/null +++ b/src/queries/__tests__/find-by.test.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { View } from 'react-native'; +import { render, screen } from '../..'; +import { clearRenderResult } from '../../screen'; + +test('findByTestId detects screen being detached', async () => { + render(); + + const promise = screen.findByTestId('not-exists', {}, { timeout: 50 }); + + // Detach screen + clearRenderResult(); + + await expect(promise).rejects.toThrowErrorMatchingInlineSnapshot(` + "Unable to find an element with testID: not-exists + + Screen is no longer attached." + `); +}); diff --git a/src/queries/make-queries.ts b/src/queries/make-queries.ts index e5b9cca09..d2c15798c 100644 --- a/src/queries/make-queries.ts +++ b/src/queries/make-queries.ts @@ -87,6 +87,10 @@ function formatErrorMessage(message: string, printElementTree: boolean) { return message; } + if (!screen.isAttached) { + return `${message}\n\nScreen is no longer attached.`; + } + const json = screen.toJSON(); if (!json) { return message; diff --git a/src/screen.ts b/src/screen.ts index 6787e1c70..f53af31fa 100644 --- a/src/screen.ts +++ b/src/screen.ts @@ -12,7 +12,12 @@ const notImplementedDebug = () => { }; notImplementedDebug.shallow = notImplemented; -const defaultScreen: RenderResult = { +interface Screen extends RenderResult { + isAttached: boolean; +} + +const defaultScreen: Screen = { + isAttached: false, get root(): ReactTestInstance { throw new Error(SCREEN_ERROR); }, @@ -112,10 +117,13 @@ const defaultScreen: RenderResult = { findAllByText: notImplemented, }; -export let screen: RenderResult = defaultScreen; +export let screen: Screen = defaultScreen; -export function setRenderResult(output: RenderResult) { - screen = output; +export function setRenderResult(renderResult: RenderResult) { + screen = { + ...renderResult, + isAttached: true, + }; } export function clearRenderResult() { From 7cf0d4c0992d87585416377484b4a8c48a1eaf70 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Mar 2024 14:51:34 +0100 Subject: [PATCH 2/5] fix: detect detached screen and display proper error message. --- src/queries/__tests__/find-by.test.tsx | 2 +- src/queries/make-queries.ts | 4 ++-- src/screen.ts | 9 +++------ 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/queries/__tests__/find-by.test.tsx b/src/queries/__tests__/find-by.test.tsx index 62448e72a..1d0450c19 100644 --- a/src/queries/__tests__/find-by.test.tsx +++ b/src/queries/__tests__/find-by.test.tsx @@ -14,6 +14,6 @@ test('findByTestId detects screen being detached', async () => { await expect(promise).rejects.toThrowErrorMatchingInlineSnapshot(` "Unable to find an element with testID: not-exists - Screen is no longer attached." + Screen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited." `); }); diff --git a/src/queries/make-queries.ts b/src/queries/make-queries.ts index d2c15798c..055d88fec 100644 --- a/src/queries/make-queries.ts +++ b/src/queries/make-queries.ts @@ -87,8 +87,8 @@ function formatErrorMessage(message: string, printElementTree: boolean) { return message; } - if (!screen.isAttached) { - return `${message}\n\nScreen is no longer attached.`; + if (screen.isDetached) { + return `${message}\n\nScreen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited.`; } const json = screen.toJSON(); diff --git a/src/screen.ts b/src/screen.ts index f53af31fa..1fcbd3e2a 100644 --- a/src/screen.ts +++ b/src/screen.ts @@ -13,11 +13,11 @@ const notImplementedDebug = () => { notImplementedDebug.shallow = notImplemented; interface Screen extends RenderResult { - isAttached: boolean; + isDetached?: boolean; } const defaultScreen: Screen = { - isAttached: false, + isDetached: true, get root(): ReactTestInstance { throw new Error(SCREEN_ERROR); }, @@ -120,10 +120,7 @@ const defaultScreen: Screen = { export let screen: Screen = defaultScreen; export function setRenderResult(renderResult: RenderResult) { - screen = { - ...renderResult, - isAttached: true, - }; + screen = renderResult; } export function clearRenderResult() { From 44a5ee7fc267f15ef3d7c7411a4659b2817aefa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Jastrze=CC=A8bski?= Date: Wed, 27 Mar 2024 19:34:06 +0100 Subject: [PATCH 3/5] chore: improve error message --- src/queries/__tests__/find-by.test.tsx | 5 ++++- src/queries/make-queries.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/queries/__tests__/find-by.test.tsx b/src/queries/__tests__/find-by.test.tsx index 1d0450c19..de791ce99 100644 --- a/src/queries/__tests__/find-by.test.tsx +++ b/src/queries/__tests__/find-by.test.tsx @@ -14,6 +14,9 @@ test('findByTestId detects screen being detached', async () => { await expect(promise).rejects.toThrowErrorMatchingInlineSnapshot(` "Unable to find an element with testID: not-exists - Screen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited." + Screen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited. + + We recommend enabling Testing Library ESLint plugin to catch these issues at build time: + https://callstack.github.io/react-native-testing-library/docs/eslint-plugin-testing-library" `); }); diff --git a/src/queries/make-queries.ts b/src/queries/make-queries.ts index 055d88fec..e77f441cd 100644 --- a/src/queries/make-queries.ts +++ b/src/queries/make-queries.ts @@ -88,7 +88,7 @@ function formatErrorMessage(message: string, printElementTree: boolean) { } if (screen.isDetached) { - return `${message}\n\nScreen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited.`; + return `${message}\n\nScreen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited.\n\nWe recommend enabling Testing Library ESLint plugin to catch these issues at build time:\nhttps://callstack.github.io/react-native-testing-library/docs/eslint-plugin-testing-library`; } const json = screen.toJSON(); From 4c20bfbe05b220e9187d204c6c7fd9cc9f14d871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Jastrze=CC=A8bski?= Date: Thu, 28 Mar 2024 15:53:23 +0100 Subject: [PATCH 4/5] chore: update link --- src/queries/make-queries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/queries/make-queries.ts b/src/queries/make-queries.ts index e77f441cd..fa89b2843 100644 --- a/src/queries/make-queries.ts +++ b/src/queries/make-queries.ts @@ -88,7 +88,7 @@ function formatErrorMessage(message: string, printElementTree: boolean) { } if (screen.isDetached) { - return `${message}\n\nScreen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited.\n\nWe recommend enabling Testing Library ESLint plugin to catch these issues at build time:\nhttps://callstack.github.io/react-native-testing-library/docs/eslint-plugin-testing-library`; + return `${message}\n\nScreen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited.\n\nWe recommend enabling "eslint-plugin-testing-library" to catch these issues at build time:\nhttps://callstack.github.io/react-native-testing-library/docs/getting-started#eslint-plugin`; } const json = screen.toJSON(); From a83ff97adbb06d5587efdc8aac40f546ea98b71b Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Thu, 28 Mar 2024 18:11:39 +0100 Subject: [PATCH 5/5] chore: update snapshots --- src/queries/__tests__/find-by.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/queries/__tests__/find-by.test.tsx b/src/queries/__tests__/find-by.test.tsx index de791ce99..c018d97f0 100644 --- a/src/queries/__tests__/find-by.test.tsx +++ b/src/queries/__tests__/find-by.test.tsx @@ -16,7 +16,7 @@ test('findByTestId detects screen being detached', async () => { Screen is no longer attached. Check your test for "findBy*" or "waitFor" calls that have not been awaited. - We recommend enabling Testing Library ESLint plugin to catch these issues at build time: - https://callstack.github.io/react-native-testing-library/docs/eslint-plugin-testing-library" + We recommend enabling "eslint-plugin-testing-library" to catch these issues at build time: + https://callstack.github.io/react-native-testing-library/docs/getting-started#eslint-plugin" `); });