Develop Reference

Getting "TypeError: (0 , _firestore.getFirestore) is not a function" When trying to perform integration testing with Jest, Firebase and Expo

I am getting the error "TypeError: (0 , _firestore.getFirestore) is not a function" When trying to run a Jest integration test with my app's Login page. It seems that Jest is unable to recognise it as a function despite the rest of my Expo app being able to recognise it just fine.
I am wondering if this is because My firebase config file uses Web Version 9 as required by Expo and if there are any solutions or alternatives to this.
Thanks
import { initializeApp } from 'firebase/app';
import { getFirestore } from "firebase/firestore";
// Firebase API
const firebaseConfig = {
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
I have tried import { firestore } from "firebase/firestore", import "firebase/firestore",
export const db+ app.firestore().
None of them works.
This is my package.json
{
"name": "test",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#emailjs/browser": "^3.10.0",
"#expo/dev-server": "0.1.120",
"#expo/webpack-config": "^0.17.0",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "6.5.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-picker/picker": "2.4.8",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.3",
"#twotalltotems/react-native-otp-input": "1.3.7",
"base-64": "^1.0.0",
"expo": "^47.0.8",
"expo-checkbox": "~2.2.0",
"expo-document-picker": "~11.0.1",
"expo-image-picker": "~14.0.2",
"expo-location": "~15.0.1",
"expo-status-bar": "~1.4.0",
"expo-web-browser": "~12.0.0",
"firebase": "^9.16.0",
"jest": "^26.6.3",
"jest-expo": "^47.0.1",
"leo-profanity": "^1.7.0",
"lottie-react-native": "^5.1.4",
"moment": "^2.29.4",
"parse": "^4.0.0",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-hook-form": "^7.42.0",
"react-native": "0.70.5",
"react-native-draggable-flatlist": "^4.0.0",
"react-native-dropdown-select-list": "^2.0.4",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-places-autocomplete": "^2.5.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "^8.1.1",
"react-native-maps": "1.3.2",
"react-native-maps-directions": "^1.9.0",
"react-native-modal-datetime-picker": "^14.0.1",
"react-native-otp-input": "^1.0.12",
"react-native-paper": "^4.12.5",
"react-native-picker-select": "^8.0.4",
"react-native-reanimated": "~2.12.0",
"react-native-reanimated-carousel": "^3.1.5",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-uuid": "^2.0.1",
"react-native-web": "~0.18.7",
"react-native-webview": "11.23.1",
"rn-credit-card": "^1.0.4",
"uniqid": "^5.4.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#testing-library/react-native": "^11.5.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
]
},
"private": true
}

Error with #reduxjs/toolkit and Typescript - TS1005

After installing the required packages to run react-redux and #reduxjs//toolkit in my current projects, I ran into this error after running npm start:
TypeScript error in C:/Users/xxx/Documents/xxx/node_modules/#reduxjs/toolkit/dist/configureStore.d.ts(1,13):
'=' expected. TS1005
1 | import type { Reducer, ReducersMapObject, Middleware, Action, AnyAction, StoreEnhancer, Store, Dispatch, PreloadedState, CombinedState } from 'redux';
My store is this:
import { configureStore } from "#reduxjs/toolkit";
import securityReducer from "../features/security/securitySlice.js";
const store = configureStore({
reducer: {
security: securityReducer,
},
});
export default store;
My index.tsx file contains this:
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";`
import "./index.css";`
import AppContainer from "./AppContainer.js";
import * as serviceWorker from "./serviceWorker";
import store from "./app/store.jsx";
import { Provider } from "react-redux";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<AppContainer />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
And my package.json file is this:
{
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"#aws-amplify/ui-react": "^1.2.0",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.6.1",
"#types/react-router-dom": "^5.1.7",
"amazon-cognito-identity-js": "^5.0.3",
"amazon-cognito-identity-js-typescript": "^1.22.0",
"aws-amplify": "^4.0.2",
"aws-sdk": "^2.799.0",
"axios": "^0.21.1",
"bootstrap": "^4.4.1",
"cors": "^2.8.5",
"lodash": "^4.17.15",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.25.3",
"rc-slider": "~9.2.4",
"react": "^16.13.0",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-icons": "^1.1.0",
"react-dom": "^16.13.0",
"react-google-charts": "^3.0.15",
"react-icons": "^4.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.0",
"redux": "^4.1.0",
"redux-ts": "^4.3.0",
"typescript": "~3.8.2"
},
"scripts": {
"start": "react-scripts start",
"test:coverage": "react-scripts test --watchAll=false --coverage",
"build": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"test:watch": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/enzyme": "^3.10.5",
"#types/jest": "^24.0.0",
"#types/lodash": "^4.14.149",
"#types/node": "^12.0.0",
"#types/rc-slider": "~8.6.5",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"#types/react-redux": "^7.1.18",
"#types/redux": "^3.6.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.4",
"node-sass": "^4.13.1"
}
}
I read from some posts that my version of typescript needed to be updated to 3.8 but it still doesn't seem to solve the issue.
Thank you so much if anyone knows how to fix this error.

Maybe you can upgrade your typescript version to "^4.1.2", I also have the same problem with you, and I fix that with this

SyntaxError: Unexpected token 'export' on '#react-navigation'

I created a new React Native project and used Jest testing, it goes very well. But when I try it in an existing app it couldn't work, instead it gave me the following error.I suspect it is a configuration error that caused this problem:
Error
SyntaxError: Unexpected token 'export'
4 | //Import React
5 | import React, {useEffect, useState} from 'react';
> 6 | import { StackActions, NavigationActions } from 'react-navigation';
| ^
7 | import {useSelector, useDispatch} from 'react-redux';
8 | import {changeVoucherCategory} from '../../../actions';
9 | //Import all required component
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/Screen/drawerScreens/Profile/ProfileScreen.js:6:1)
Below are some of my files
package.json
{
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "react-scripts start",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build:ios": "react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/IGBFAMILY/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
},
"dependencies": {
"#babel/runtime": "^7.14.0",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/cli-platform-ios": "^4.13.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^6.0.0",
"#react-navigation/bottom-tabs": "^5.11.2",
"#react-navigation/material-top-tabs": "^5.3.10",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"#sentry/react-native": "^2.3.0",
"aws-sdk": "^2.897.0",
"babel-preset-react-app": "^7.0.0",
"base64-arraybuffer": "^0.2.0",
"jest-cli": "^26.6.3",
"json-groupby": "^1.1.0",
"moment": "^2.29.1",
"query-string": "^7.0.0",
"react": "16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.64.0",
"react-native-barcode-mask": "^1.2.4",
"react-native-base64": "^0.2.1",
"react-native-camera": "^3.43.3",
"react-native-checkbox-lite": "^1.0.2",
"react-native-countdown-component": "^2.7.1",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^8.1.3",
"react-native-elements": "^3.3.1",
"react-native-firebase": "^5.6.0",
"react-native-flatlist-slider": "^1.0.5",
"react-native-fs": "^2.17.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-material-tabs": "^4.1.2",
"react-native-mime-types": "^2.3.0",
"react-native-modal-dropdown": "^1.0.0",
"react-native-modal-overlay": "^1.3.1",
"react-native-passmeter": "0.0.5",
"react-native-phone-number-input": "^2.0.0",
"react-native-qrcode-svg": "^6.0.6",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-sha256": "^1.3.6",
"react-native-snap-carousel": "^3.9.1",
"react-native-sqlite-storage": "^5.0.0",
"react-native-svg": "^12.1.0",
"react-native-tab-view": "^2.16.0",
"react-native-ui-xg": "0.0.6",
"react-native-vector-icons": "^7.1.0",
"react-native-webview": "^11.4.0",
"react-navigation": "^4.4.2",
"react-navigation-drawer": "^2.5.2",
"react-navigation-stack": "^2.8.4",
"react-redux": "^7.2.3",
"react-scripts": "^4.0.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "7.11.6",
"#babel/preset-env": "^7.14.1",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "^26.6.3",
"eslint": "6.8.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "^16.14.0"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)",
"node_modules/?!(react-navigation)"
]
}
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset',"#babel/react", "#babel/env"],
};
App-test.js
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import App from '../src/App';
it('renders correctly', () => {
renderer.create(<App />);
});
I had tried many accepted answers on StackOverflow and internet but no luck on solving this problem.These are some of the links I can remember of, there might be a little unrelated because I faced the same problem with other modules apart from #react-navigation:
https://stackoverflow.com/a/59802557/14792325
https://stackoverflow.com/a/54463740/14792325
https://stackoverflow.com/a/55803188/14792325
https://stackoverflow.com/a/43197503/14792325
https://lifesaver.codes/answer/react-native-syntaxerror-unexpected-token-import
Can anyone help me to identify my mistakes? Thanks a lot.

Flow 'unexpected token <' for jsx code in IDE

For some reason my ide is printing out 'Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag' for the following react code. I don't understand why it's printing that error since the component it's referring to is wrapped in an enclosing parent tag the <TableBody> tag specifically.
/* #flow */
import React from 'react'
import TableBody from '#material-ui/core/TableBody'
import Roster from './roster.jsx'
import type { MembersType } from '../../typeDefs/MembersType.js'
type RanksType = {
_id: string | number,
rankName: string,
members: Array<MembersType>
};
export default (props: {
members: MembersType
}) => (
<TableBody>
{props.members.map(({
_id,
rankName,
members,
}: RanksType) => (
<Roster <---specifically refering to this element
key={_id}
rank={rankName}
members={members}
/>
))}
</TableBody>
)
Package.json
{
"name": "novacms",
"private": true,
"scripts": {
"start": "meteor --settings settings-production.json --port $IP:$PORT",
"dev": "meteor --settings settings-development.json --port $IP:$PORT",
"test": "meteor test --driver-package cultofcoders:mocha --port $IP:$PORT"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.42",
"#novacms/assign": "^1.0.0",
"#novacms/dependancy-injector": "^1.0.0",
"#novacms/event-store": "^1.0.0",
"#novacms/extend": "^1.0.0",
"#novacms/extendschema": "^1.0.1",
"#novacms/has": "^1.0.0",
"#novacms/pipe": "^1.0.0",
"#novacms/type-check": "^1.0.0",
"#material-ui/core": "^1.0.0-rc.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
"bcrypt-nodejs": "0.0.3",
"event-emitter": "^0.3.5",
"faker": "^4.1.0",
"lodash": "^4.17.5",
"md5": "^2.2.1",
"meteor-apihelper": "^1.0.0",
"meteor-node-stubs": "^0.3.3",
"mobx": "^3.6.1",
"mobx-react": "^4.4.2",
"moment": "^2.21.0",
"npm": "^5.10.0",
"prettier": "^1.12.1",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-router": "^4.2.0",
"react-storybook": "^1.0.0",
"recompose": "^0.26.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.1",
"simpl-schema": "^1.4.2",
"simpl-schema-mockdoc": "^1.0.5",
"sinon": "^4.5.0",
"spacejam": "^1.6.1"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"chai": "^4.1.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-meteor": "^0.4.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-meteor": "^5.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-flowtype": "^2.46.3"
},
"parser": "babel-eslint"
}
VSCode config
{
"files.eol": "\r\n",
"editor.fontFamily": "'Fira Mono', Consolas, 'Courier New', monospace",
"eslint.workingDirectories": [
"./src",
"./client",
"./imports",
"./server"
],
"react.beautify.onSave": true,
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"javascript.validate.enable": false,
"javascript.format.enable": false,
}
.babelrc
{
"plugins": ["transform-decorators-legacy", "transform-class-properties", "syntax-dynamic-import"]
}

I had a very similar issue.
Firstly delete (rename) your .babelrc file which you use (remove where ever you set it).
If storybook can't find that file, then it will use its own settings. This worked for me to prove that it was that file that caused the issue.
If this is the same for you then create a new .babelrc file, and place it into the storybook folder. Storybook will now use this and your project can continue to use the existing one.
The tricky part is finding the config setting in you existing .babelrc file that is breaking storybook - for me it was the react-hot-load/babel, but you don't have that listed.
My file ended up with only #babel/plugin-proposal-class-properties and #babel/plugin-proposal-rest-spread for plugins.

Trying to unit test a React component using Jest and Enzyme

I am trying to run a simple jest and enzyme test against a react component and test throws: ReferenceError: React is not defined. I followed all simple tutorials on jest and react testing but all of them resulted in the same exception. I used npm test and result was the same as yarn test, React not defined. I am confused. Any help would be appreciated.
Checkbox.test.jsx: simple test
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Checkbox from './Checkbox';
describe('<Checkbox />', () => {
it('should render three <Checkbox /> components', () => {
const wrapper = shallow(<Checkbox />);
expect(wrapper.prop('title')).toEqual('Events — Event Radar');
});
});
Console log
$ yarn test
FAIL src\components\ReusableComponents\Checkbox.test.jsx (5.248s)
<Checkbox />
× should render three <Checkbox /> components (4ms)
● <Checkbox /> › should render three <Checkbox /> components
ReferenceError: React is not defined
at Object.<anonymous> (src/components/ReusableComponents/Checkbox.test.jsx:8:40)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 10.517s
Ran all test suites.
error Command failed with exit code 1.
package.json
{
"name": "mi-benchmarking-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.0",
"classnames": "^2.2.5",
"history": "^4.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.1.1",
"react-dom": "^16.0.0",
"react-logger": "^1.1.0",
"react-pagination-table": "^1.1.0",
"react-redux": "^5.0.6",
"react-router": "^3.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "1.0.14",
"react-simple-paginate": "^1.1.0",
"react-table": "^6.6.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.26.0",
"babel-eslint": "^6.0.4",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-require": "^3.0.0",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-spread-inline": "0.0.2",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"clean-webpack-plugin": "^0.1.13",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"eslint": "^3.19.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-react": "^7.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.16.1",
"jest": "^21.2.1",
"jest-enzyme": "^4.0.1",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"redux-devtools": "^3.4.0",
"sinon": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "2.6.1",
"webpack-dev-server": "2.5.0",
"webpack-manifest-plugin": "1.1.0"
},
"scripts": {
"start": "npm run build:dev",
"build:dev": "webpack-dev-server --inline --history-api-fallback",
"build:test": "webpack --define process.env.NODE_ENV='test'",
"build:stage": "webpack --define process.env.NODE_ENV='stage'",
"build:prod": "webpack --define process.env.NODE_ENV='production'",
"eject": "react-scripts eject",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}

Import React in your test and the error should disappear:
import React from 'react';
I tried removing this import in one of my tests and I got the same error you mentioned.
I hope this helps.