react-native-testing-library
react-native-testing-library copied to clipboard
"Cannot read property 'testID' of null"
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
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
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);
};
Would this be related to my question? https://github.com/callstack/react-native-testing-library/issues/786
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",
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.
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.
According to ReactTestInstance
TS typing props
should not be nullish. I think we could add some check in the code to support this case.
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.