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
}

Uncaught TypeError: Cannot read property 'use' of undefined at eval (app.js_+_120_modules:29481)

I am trying to make a framework7 cordova vue.js application, but i am getting an uncaught typeerror and my web page doesn't show anything.
This is a screenshot of my console error
My store.js code:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0,
message:'message from vue'
},
mutations: {
}
})
My app.js code:
// Import Vue
import { createApp } from 'vue';
// Import Framework7
import Framework7 from 'framework7/lite-bundle';
// Import Framework7-Vue Plugin
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
// Import Framework7 Styles
import 'framework7/framework7-bundle.css';
// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import App Component
import App from '../components/app.vue';
import store from '../pages/auth/store/store';
// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);
// Init App
const app = createApp(App);
store,
// Register Framework7 Vue components
registerComponents(app);
// Mount the app
app.mount('#app');
Plus while compiling i also get this error :
WARNING in ./src/pages/auth/store/store.js 3:0-7
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compile, computed, createApp, createBlock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineEmit, defineProps, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, initCustomFormatter, inject, isProxy, isReactive, isReadonly, isRef, isVNode, markRaw, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useContext, useCssModule, useCssVars, useSSRContext, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers, withScopeId)
# ./src/js/app.js 14:0-46 19:0-5
webpack 5.13.0 compiled with 1 warning in 2916 ms
i ｢wdm｣: Compiled with warnings.
I am new at this and i don't know whats wrong, please help me out!
This is my package.json:-
{
"name": "whatssup",
"private": true,
"version": "1.0.0",
"description": "Whatssup",
"repository": "",
"license": "UNLICENSED",
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development webpack serve --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production node ./build/build.js",
"build-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
"build-cordova-ios": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build ios",
"cordova-ios": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run ios",
"build-cordova-android": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android",
"cordova-android": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run android",
"postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/"
},
"browserslist": [
"Android >= 7",
"IOS >= 11",
"Safari >= 11",
"Chrome >= 49",
"Firefox >= 31",
"Samsung >= 5"
],
"dependencies": {
"dom7": "^3.0.0",
"firebase": "^8.2.2",
"framework7": "^6.0.3",
"framework7-icons": "^3.0.1",
"framework7-vue": "^6.0.3",
"skeleton-elements": "^3.3.0",
"swiper": "^6.4.5",
"vue": "^3.0.5",
"vuex": "^3.6.0"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/plugin-transform-runtime": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/runtime": "^7.12.5",
"#vue/compiler-sfc": "^3.0.5",
"babel-loader": "^8.2.2",
"chalk": "^4.1.0",
"copy-webpack-plugin": "^7.0.0",
"cpy-cli": "^3.1.1",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.3",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"ora": "^5.2.0",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.2",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"url-loader": "^4.1.1",
"vue-loader": "^16.1.2",
"vue-style-loader": "^4.1.2",
"webpack": "^5.13.0",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
}
}

Jest encountered an unexpected token React

This is screenshot of error:
I have 2 tests, the first one is working alright: sum.js :
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console.
the second one (I dont sure) is set by default by create-react-app
App.test.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js :
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.12",
"#fortawesome/free-solid-svg-icons": "^5.6.3",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.

The issue is that the app was bootstrapped with create-react-app, but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.
The test failed since Jest was not configured to transpile the JSX syntax.
Tests that use syntax like JSX have to be transpiled before they can be run by Jest.
create-react-app includes react-scripts which handles all of that configuration automatically.
If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.
If an app is not bootstrapped with create-react-app, or if the app is ejected from create-react-app, then Jest needs to be installed and configured to transpile the test code.

Module not found: Can't resolve 'autosuggest-highlight/match'

I am trying to compile my react website. But whenever I try to build, it fails. I keep getting
Module not found: Can't resolve 'autosuggest-highlight/match'
I have react-drawer just outside where this file is, as well as my npm and node modules up to date. Every time I try to update the files, or make a change, it doesn't even start to compile and crashes at "react-script start".
This is the code for the page that crashed:
import React from 'react';
import Autosuggest from 'react-autosuggest';
import * as AutosuggestHighlightMatch from 'autosuggest-highlight/match';
import * as AutosuggestHighlightParse from 'autosuggest-highlight/parse';
import ApiRequest from './ApiRequest.js';
class Search extends React.Component {
componentDidMount() {
new ApiRequest('GET', '/clientlist').send((res, people) => {
if (res.status == 200) {
this.setState({people});
} else if (res.status == 401 || res.status == 403) {
console.log('authentication error');
}
});
}
constructor() {
super();
this.state = {
value: '',
suggestions: [],
people: [],
selection: ''
};
this.renderSuggestion = (suggestion, {query}) => {
const suggestionText = `${suggestion.name}`;
const matches = AutosuggestHighlightMatch(suggestionText,query);
const parts = AutosuggestHighlightParse(suggestionText, matches);
return (
<span className='suggestion-content '
style={{backgroundImage: `url(${suggestion.profileimg || 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'})`}}>
<span className="name">
{
parts.map((part, index) => {
const className = part.highlight ? 'highlight' : null;
return (
<span className={className} key={index}>{part.text}</span>
);
})
}
</span>
</span>
)
};
This is the image of my folder hierarchy:
Here is my Package.Json
{
"name": "medimo",
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"chart.js": "^2.6.0",
"es6-object-assign": "^1.1.0",
"history": "^1.17.0",
"moment": "^2.18.1",
"parse-react": "^0.5.2",
"parse-server": "^2.5.3",
"parse5": "^3.0.2",
"postcss": "^6.0.9",
"postcss-cssnext": "^3.0.2",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-chartjs-2": "^2.5.7",
"react-dom": "^15.6.1",
"react-dropdown": "^1.2.5",
"react-image": "^1.0.1",
"react-motion-drawer": "file:../custom-deps/react-motion-drawer",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-sortable-hoc": "^0.6.7",
"react-tabs": "^1.1.0",
"socket.io-client": "^2.0.3",
"socket.io-react": "^1.2.0",
"utils": "^0.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

I had the same problem with the exact same package funnily enough.
This is what I have that fixed it:
import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";

The dependency needs to be added it seems like:
npm i autosuggest-highlight

What solved the problem for me was to:
Delete node_modules directory
run npm install

Check-in official page document, following the way of import also working
import AutosuggestHighlightMatch from "autosuggest-highlight/match";
import AutosuggestHighlightParse from "autosuggest-highlight/parse";

Jest - Unexpected token import

I'm trying to learn how to do unit testing with React and jest. I've run into the following error:
Unexpected token import
Here are my babel presets:
{
"presets": ["es2015", "stage-0", "react"],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
Here is the file i'm trying to test:
import jest from 'jest';
import React from 'react';
import { shallow } from 'enzyme';
import Step from '../src/components/step.js';
const wrapper = shallow(<Step />);
wrapper.find('a').simulate('click', { preventDefault() {} });
and here is my package.json:
{
"name": "react-simple-boilerplate",
"version": "1.0.0",
"description": "Simple and lightweight Boilerplate for ReactJS projects",
"scripts": {
"lint": "eslint src",
"start": "node server.js",
"test": "jest"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.0",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"eslint": "^3.19.0",
"eslint-plugin-react": "^6.10.3",
"jest": "^21.2.1",
"node-sass": "^4.5.2",
"react-addons-test-utils": "^15.6.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
"babel-loader": "^7.0.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"main": "server.js"
}
Have no idea why its giving me this message?

It looks like babel-jest is missing among your dependencies. That's why jest is not running babel on your ES6+ code before executing tests.

I'm pretty sure you need to add your babel presets to test as well, jest sets the env variable to test.
So...
"test": {
"plugins": ["transform-es2015-modules-commonjs"],
"presets": ["es2015", "react", "stage-0"]
}