I am receiving the above error when trying to test the main App.js. I was receiving the error "component not defined", but I added '@babel-preset/react' to my react native babel config and I am getting this error. I am new to Jest and using this testing library, so I am not 100% sure it is configured correctly, but I seem to be making some progress. Would I need to make my class components function components?
// test
/* eslint-disable no-undef */
import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
jest.mock('react-native', () => {});
jest.mock('react', () => {});
jest.mock('react-redux', () => {});
jest.mock('../src/styles', () => {});
jest.mock('../src/components/common', () => {});
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('@invertase/react-native-apple-authentication', () => {});
jest.mock('@react-native-community/google-signin', () => {});
jest.mock('@react-native-community/picker', () => {});
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');
it('renders correctly', () => {
renderer.create(<App />);
});
// package.json
{
"name": "mindflow",
"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",
"@babel/preset-react": "^7.13.13",
"@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": "^17.0.2",
"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', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
};