Typescript and React Navigation app won't render (TypeError: Cannot read properties of undefined (reading 'current')) #1061
Comments
|
Here's my package.json as well. {
"name": "bedfellow",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"tsc": "tsc",
"prepare": "husky install"
},
"dependencies": {
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@types/react-native-dotenv": "^0.2.0",
"axios": "0.24.0",
"lottie-ios": "3.2.3",
"react": "18.0.0",
"react-native": "0.69.3",
"react-native-dotenv": "^3.3.1",
"react-native-lottie-splash-screen": "^1.0.1",
"react-native-paper": "^4.12.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-spotify-remote": "^0.3.10"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^3.0.1",
"@testing-library/jest-native": "^4.0.11",
"@testing-library/react-native": "^11.0.0",
"@types/jest": "^27.4.0",
"@types/react": "^17.0.38",
"@types/react-native": "^0.66.10",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"husky": "^8.0.1",
"jest": "^28.1.3",
"metro-react-native-babel-preset": "^0.66.2",
"prettier": "^2.7.1",
"react-test-renderer": "17.0.2",
"typescript": "^4.5.4"
}
} |
|
I have the same issue, I just recently upgraded a boilerplate to expo 46. You can check the issue here, https://github.com/karlmarxlopez/expo-ts-and-jest. |
|
Actually, A simple test like this will also result in the same error. import 'react';
import {render} from '@testing-library/react-native';
import {Text} from 'react-native';
// import App from './App';
const App = () => <Text>Hello</Text>;
describe('<App/>', () => {
it('should render without crashing', () => {
const tree = render(<App />);
expect(tree.toJSON()).not.toBeNull();
});
}); |
|
Okay good to know, I didn't think it was related as I put together a really simple functional component like your example and the same result happened. I'm wondering if it's a version disparity in the library based on this issue. I know it's unrelated but I'm wondering if that's a clue at least. EDIT: Well dang seems like the latest package.json has react 18 as a dependency. So that's probably an incorrect assumption. |
|
@karlmarxlopez Think I got it figured out, upgrade your devDependency of 'react-test-renderer' to match your version of react. I got it working on your repo, I guess the bump from 17 to 18 is causing the issue, shame it's manifesting so vaguely. |
|
Got this solved so closing out the issue. |
|
I've added the root cause/fix for this issue to our Troubleshooting guide: https://callstack.github.io/react-native-testing-library/docs/troubleshooting#matching-react-native-react--react-test-renderer-versions |
|
TypeError: Cannot read properties of undefined (reading 'debug') const App = () => Hello; My package.json |
|
I am on 18.2.0 and getting this while using |
|
@khushal87 Your error: "ReferenceError: You are trying to access a property or method of the Jest environment after it has been torn down. From src/components/MessageInput/tests/AudioAttachmentUploadPreviewExpo.test.tsx." suggests that you did not wait for some async action to complete before the test has been tore done. |
|
@mdjastrzebski this is same for Pressable as well ● AudioAttachmentExpo › handle play pause button when isPausedStatusAvailable unavailable and progress 1 at getEventHandlers (node_modules/react-native/Libraries/Pressability/usePressability.js:49:53) |
|
For me the functions that I am trying to test is not even running. The component simply fails in testing since it has Pressable or TouchableOpacity. |
|
@khushal87 I am experiencing the same problem: |
Ask your Question
I have the following test where I'm trying to render my login screen.
But every time I run the tests I end up getting this error.
I've tried it with a super basic component as well (A View and Text component) and I still get the same error. I've read around here that there's something up when using TS and imports, does this seem like it's related? Thanks!
The text was updated successfully, but these errors were encountered: