TypeError: Cannot read property '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined when using react-test-render

Description

I am using the Jest Testing Library, the newest version. When I try to use react-test-render on a function base component I receive the error TypeError: Cannot read property '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined. I am not sure why this is happening. Below you will find relevant files.

React Native version:

0.63.4

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

yarn test

Expected Results

I am trying to log the json of the component to the console, I tried creating a snap shot , but that didn't work.

Files

Package.json

{ "name": "app name", "version": "2.3.31", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest --verbose", "lint": "eslint .", "bpmn2workflow": "node scripts/bpmn2workflow.js", "copy_audio": "node scripts/copy_audio_files.js", "sentences": "node scripts/sentences_test.js", "env:dev": "node scripts/set-env.js dev", "env:stage": "node scripts/set-env.js stage", "env:prod": "node scripts/set-env.js prod", "create_local_audio_json": "node scripts/create_local_audio_file.js", "create_workflows": "node scripts/bpmn2workflow.js && node scripts/create_local_audio_file.js" }, "dependencies": { "@babel/preset-env": "^7.13.12", "@invertase/react-native-apple-authentication": "^1.1.2", "@react-native-community/async-storage": "^1.11.0", "@react-native-community/audio-toolkit": "^2.0.3", "@react-native-community/checkbox": "^0.4.2", "@react-native-community/google-signin": "^4.0.3", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/picker": "^1.6.5", "@react-native-community/push-notification-ios": "^1.6.0", "@react-native-community/slider": "^3.0.3", "@react-native-firebase/analytics": "^11.0.0", "@react-native-firebase/app": "^11.0.0", "@react-native-firebase/auth": "^11.0.0", "@react-native-firebase/crashlytics": "^11.0.0", "@react-native-firebase/firestore": "^11.0.0", "@react-native-firebase/messaging": "^11.0.0", "@react-native-firebase/remote-config": "^11.0.0", "@react-navigation/native": "^5.9.3", "@react-navigation/stack": "^5.3.9", "create-react-class": "^15.6.3", "duration": "^0.2.2", "firebase": "^7.23.0", "firebase-messaging": "^1.0.6", "format": "^0.2.2", "format-duration": "^1.3.1", "fs": "0.0.1-security", "lodash": "^4.17.20", "moment": "^2.27.0", "mp3-duration": "^1.1.0", "music-metadata": "^7.0.1", "nocache": "^2.1.0", "react": "16.13.1", "react-lodash": "^0.1.2", "react-native": "0.63.4", "react-native-background-timer": "^2.2.0", "react-native-chart-kit": "^6.4.1", "react-native-fs": "^2.16.6", "react-native-gesture-handler": "^1.6.1", "react-native-iap": "5.1.3", "react-native-iaphub": "^6.0.3", "react-native-keep-awake": "^4.0.0", "react-native-parallax-scroll-view": "^0.21.3", "react-native-push-notification": "^6.1.1", "react-native-reanimated": "^1.9.0", "react-native-router-flux": "^4.2.0", "react-native-safe-area-context": "^1.0.2", "react-native-screens": "^2.8.0", "react-native-simple-radio-button": "^2.7.4", "react-native-snap-carousel": "^4.0.0-beta.5", "react-native-snap-slider": "^0.3.0", "react-native-splash-screen": "^3.2.0", "react-native-svg": "^12.1.0", "react-native-watch-connectivity": "^0.4.3", "react-native-xml2js": "^1.0.3", "react-redux": "^7.2.0", "react-test-renderer": "^17.0.2", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "watchman": "^1.0.0" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/runtime": "^7.13.9", "@react-native-community/eslint-config": "^0.0.5", "babel-jest": "^24.9.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", "eslint": "^7.5.0", "eslint-config-airbnb": "^18.2.0", "eslint-plugin-import": "^2.22.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.8", "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.58.0" }, "jest": { "preset": "react-native", "automock": true, "setupFiles": [ "./node_modules/react-native-gesture-handler/jestSetup.js" ], "moduleNameMapper": { ".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" }, "transformIgnorePatterns": [ "node_modules/(?!(@react-native|react-native|react-native-iaphub)/)" ] } }

Babel

module.exports = { presets: ['module:metro-react-native-babel-preset', '@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'], };

Test file

/**

@format */

import 'react-native'; import TestRenderer from 'react-test-renderer'; import React from 'react' import DeepLink from '../src/components/DeepLink';

jest.mock("react-native", () => {}); jest.mock("react", () => {}); jest.mock("react-redux", () => {}); jest.mock("@react-navigation/core", () => {}); jest.mock("@react-navigation/native", () => {}); jest.mock("react-native-background-timer", () => {}); jest.mock("react-native-watch-connectivity", () => {}); jest.mock("react-native-router-flux", () => {}); jest.mock('@react-native-community/google-signin', () => {}); jest.mock('@react-native-firebase/remote-config', () => {}); jest.mock('@react-native-firebase/firestore', () => {}); jest.mock('react-native-iaphub', () => {}); jest.mock('../src/library/utils/InAppPurchase.js', () => {}); jest.mock('@react-native-community/async-storage', () => {}); jest.mock('@react-native-firebase/analytics', () => {}); jest.mock('@react-native-firebase/crashlytics', () => {}); jest.mock('@react-native-firebase/auth', () => {}); jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

test('renders correctly', () => { const test = TestRenderer.create(); const testD = test.toJSON(); console.log(testD); });

Component

import React, { useEffect } from 'react'; import { View, Text } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import { locateFlow } from '../library/utils/DeepLinkEngine';

const DeepLink = (props) => {

const dispatch = useDispatch(); // variable passed down through the url const flowId = props.flow_id; // State Variables const app_bootstrap_completed = useSelector((state) => state.app_bootstrap); const allFlows = useSelector((state) => state.flows.all); const selectedCategoryId = useSelector( (state) => state.flow_categories.selected, ); const user = useSelector((state) => state.auth.user); const userWithProducts = useSelector((state) => state.user); const allFlowsNew = useSelector((state) => state.flows.all);

useEffect(() => {

locateFlow(flowId, dispatch, app_bootstrap_completed, allFlows, selectedCategoryId, user, userWithProducts, allFlowsNew);

}, [flowId]);

// Handle DeepLink return (

{flowId}

);

};

export default DeepLink;

facebook / react-native