reactotron
reactotron copied to clipboard
From version reactotron-react-native 5.0.5
Describe the bug
I'm getting an error when I run tests via jest in react native. I used an empty react native project with the latest react native.
SyntaxError: Cannot use import statement outside a module
Reactotron version
5.1.3
I just installed the new version now and having the same issue as well
I have the same issue with "reactotron-react-native": "^5.1.7".
After spinning up a fresh app with the following: https://reactnative.dev/docs/environment-setup#start-a-new-react-native-project-with-expo
I'm using yarn
version 3.4.1
from corepack
.
I'm able to run yarn test
with passing tests while also having reactotron-react-native
installed and running.
I think the missing piece may be the conditional require from here: https://docs.infinite.red/reactotron/quick-start/react-native/#step-3---add-reactotron-to-your-app
Here is my case. App is create with expo + Type Script. package.json: "dependencies": { "@babel/plugin-proposal-export-namespace-from": "^7.18.9", "@react-native-async-storage/async-storage": "1.21.0", "@react-native-clipboard/clipboard": "^1.11.2", "@react-native-community/blur": "^4.3.2", "@react-native-community/hooks": "^2.8.1", "@react-native-community/netinfo": "11.1.0", "@react-native-masked-view/masked-view": "0.3.0", "@react-navigation/native": "^6.0.12", "@react-navigation/stack": "^6.2.3", "@reduxjs/toolkit": "^1.8.5", "@shopify/flash-list": "1.6.3", "axios": "^0.27.2", "babel-plugin-module-resolver": "^5.0.0", "expo": "^50.0.2", "expo-app-loading": "~2.1.0", "expo-application": "~5.8.3", "expo-build-properties": "~0.11.1", "expo-clipboard": "~5.0.1", "expo-constants": "~15.4.5", "expo-crypto": "~12.8.1", "expo-dev-client": "~3.3.11", "expo-device": "~5.9.3", "expo-font": "~11.10.2", "expo-linear-gradient": "~12.7.2", "expo-linking": "~6.2.2", "expo-location": "~16.5.5", "expo-notifications": "~0.27.6", "expo-secure-store": "~12.8.1", "expo-splash-screen": "~0.26.4", "expo-system-ui": "~2.9.3", "expo-tracking-transparency": "~3.3.0", "expo-web-browser": "~12.8.2", "i18next": "^23.7.12", "jest-expo": "~50.0.4", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.34.2", "react-i18next": "^11.18.5", "react-native": "0.73.6", "react-native-dotenv": "^3.3.1", "react-native-mmkv": "^2.11.0", "react-native-onboarding-swiper": "^1.2.0", "react-native-phone-number-input": "^2.1.0", "react-native-reanimated": "~3.6.2", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "14.1.0", "react-native-web": "~0.19.6", "react-redux": "^8.0.2" }, "devDependencies": { "@babel/core": "^7.12.9", "@react-native-community/eslint-config": "^3.2.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/react-native": "^12.4.4", "@types/babel__core": "^7.1.20", "@types/jest": "^29.2.4", "@types/react": "~18.2.45", "@types/react-native": "^0.71.1", "@types/react-test-renderer": "^18.0.7", "@types/redux-mock-store": "^1.0.6", "@typescript-eslint/eslint-plugin": "^5.46.1", "eslint": "^8.29.0", "husky": "^8.0.0", "jest": "^29.2.1", "prettier": "^2.7.1", "react-devtools": "^5.0.0", "react-test-renderer": "18.2.0", "reactotron-react-native": "^5.1.7", "reactotron-react-native-mmkv": "^0.2.6", "reactotron-redux": "^3.1.9", "redux-mock-store": "^1.5.4", "ts-jest": "^29.1.1", "typescript": "^5.3.0"}
I have jest tests.
Tests had passed. But after I had connected Reactotron some of my tests failed.
I configured Reactotron with your project:
Step 1 - Add Reactotron as DEV dependency I have added Reactotron on my React Native project as a dev dependency.
Step 2 - Initialization. My ReactotronConfig.js looks like : ` import Reactotron, { asyncStorage } from 'reactotron-react-native'; import { reactotronRedux } from 'reactotron-redux'; import mmkvPlugin from 'reactotron-react-native-mmkv';
import storageMMKV from '@services/mmkv/storageMMKV';
const storage = storageMMKV.storage;
const reactotron = Reactotron.configure({ name: 'Name app', }) .use(asyncStorage()) .use(mmkvPlugin({ storage })) .use(reactotronRedux()) .useReactNative({ asyncStorage: false, networking: { ignoreUrls: /symbolicate/, }, editor: false, errors: { veto: stackFrame => false }, overlay: false, }) .connect(); export default reactotron;`
Step 3 - Add Reactotron to your app
I have imported ReactotronConfig.js in my App.ts