"Cannot read property 'testID' of null"

[milesj]

Describe the bug

Currently in the process of upgrading RN to v0.64 and RNTL to v8-rc.0. After upgrading RNTL, many tests started throwing errors similar to the following:

TypeError: Cannot read property 'testID' of null
--
  |  
  | at getNodeByTestId (node_modules/@testing-library/react-native/build/helpers/byTestId.js:11:61)
  | at node_modules/@testing-library/react-native/build/helpers/byTestId.js:15:44

TypeError: Cannot read property 'testID' of nullError: Cannot read property 'testID' of null
--
  |  
  | 83 \|   delayed = false,
  | 84 \| ) => {
  | > 85 \|   await waitFor(async () => {
  | \|         ^
  | 86 \|     await cb();
  | 87 \|
  | 88 \|     // Ensure an additional tick has fired, otherwise the act would close before
  |  
  | at _callee4$ (src/support/testHelpers.tsx:85:9)

TypeError: Cannot read property 'testID' of nullError: Cannot read property 'testID' of null
--
  |  
  | 571 \|
  | 572 \|       it('renders the preview button', async () => {
  | > 573 \|         await waitFor(() => renderResult.queryByTestId('PreviewButton'));
  | \|               ^
  | 574 \|         expect(renderResult.queryByTestId('PreviewButton')).toBeTruthy();
  | 575 \|       });
  | 576 \|

Expected behavior

It doesn't throw.

Steps to Reproduce

Honestly, I have no idea why this is happening (all the tests look correct), or if the RNTL upgrade is the cause.

But I figured I would report this issue in case others are running into the same problem.

Screenshots

Versions

  npmPackages:
    @testing-library/react-native: 8.0.0-rc.1 => 8.0.0-rc.1
    react: 17.0.2 => 17.0.2
    react-native: 0.64.2 => 0.64.2
    react-test-renderer: 17.0.2 => 17.0.2

[tbezman]

I setup a minimum reproduction repo for this. You can see the test here. It looks like the problem only occurs when one of the components suspend.

The above reproduction is based off this command npx react-native init AwesomeTSProject --template react-native-template-typescript

[milesj]

We currently patched the lib to unblock us.

diff --git a/node_modules/@testing-library/react-native/build/helpers/byTestId.js b/node_modules/@testing-library/react-native/build/helpers/byTestId.js
index b58543f..f7c792a 100644
--- a/node_modules/@testing-library/react-native/build/helpers/byTestId.js
+++ b/node_modules/@testing-library/react-native/build/helpers/byTestId.js
@@ -8,6 +8,10 @@ exports.queryByTestId = exports.queryAllByTestId = exports.getByTestId = exports
 var _makeQueries = require("./makeQueries");
 
 const getNodeByTestId = (node, testID) => {
+  if (!node.props) {
+    return false
+  }
+
   return typeof testID === 'string' ? testID === node.props.testID : testID.test(node.props.testID);
 };

[conor909]

Would this be related to my question? #786

[Aleksefo]

Happens on version 7.1.0+ Downgrading to version 7.0.2 fixes the issue.

"react": "17.0.1",
"react-native": "0.64.2",
"react-redux": "^7.2.0",
"redux-actions": "^2.6.5"
"@testing-library/jest-native": "^4.0.2",
"@testing-library/react-native": "7.0.2",
"jest": "^26.6.3",
"react-test-renderer": "17.0.1",
"redux-mock-store": "^1.5.4",

[getsaf]

In our case, it turns out the culprit was a Suspense fallback being set to null:

<Suspense fallback={null}>
  <SomethingThatSuspends />
</Suspense>

The types for react allow null values for the fallback prop on Suspense, so I think this a legitimate bug.

[jasperkuperus]

I ran into this same issue for a different reason:

    const { getByText, getByTestId } = render(
      <RawIntlProvider value={getIntl()}>
        <MyComponent />
      ,
      </RawIntlProvider>,
    );

Where RawIntlProvider comes from react-intl.

Watch the weirdly placed comma before </RawIntlProvider>. Somehow, prettier managed to format my JSX in that style, which didn't break the whole test (some parts still work, using getByText), but just gave me the Cannot read property 'testID' of null error. Removing the comma when using getByTestId, properly closing all tags fixed this issue for me.

[mdjastrzebski]

According to ReactTestInstance TS typing props should not be nullish. I think we could add some check in the code to support this case.

[mdjastrzebski]

Closing as stale.

@milesj, @getsaf If the issue still occurs on the latest version of RNTL & React, please provide a minimal repro repository, hopefully based on examples/basic folder from our repo, so that we can better understand the issue.