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
}

Expo app stuck on splash screen after exporting it from snack

I wanted to create a calculator in a snack in expo, but then I tried to use it with an external code editor and It just stopped working. It was stuck on the splash screen and neither android nor web showed anything.
The proyect in snack works perfectly, but when I exported it, it didn't show anything.
My App.js is:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native'
import DrawerNavigator from './components/DrawerNavigator'
export default function App(){
return(
<NavigationContainer>
<DrawerNavigator/>
</NavigationContainer>
)
}
My package.json is:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.8",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"tinydb": "*",
"expo-constants": "~14.0.2",
"#expo/vector-icons": "^13.0.0",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.18.0",
"react-native-reanimated": "~2.12.0",
"#react-navigation/drawer": "^5.7.2",
"#react-navigation/native": "^5.0.5",
"react-native-vector-icons": "*",
"react-native-gesture-handler": "~2.8.0",
"react-native-safe-area-context": "4.4.1",
"react-native-responsive-fontsize": "*",
"react-native-web": "~0.18.9",
"react-dom": "18.1.0",
"#expo/webpack-config": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

React Native Expo - No Splash Screen Showing (White Screen)

Im running an expo managed react native project and I can't figure this out for the life of me. When I first initialized Expo I had the typical splash screen show, but now, I can't see my splash screen at all it just shows a blank white screen (No errors either). Everything else works perfectly in terms of post splash loading, but i really need help getting the splash to show.
What I've Tried:
Running on iOS simulator, iOS device, Android simulator (Same thing)
Remove node_modules and package-lock.json and run 'npm i'
Cleared cache for both Expo and npm
Replaced app.js return statement with just <View><Text>...</Text></View> and still nothing.
Here's my setup:
package.json
{
"name": "placeholder",
"version": "1.0.0",
"description": "placeholder",
"main": "node_modules/expo/AppEntry.js",
"type": "commonjs",
"private": true,
"scripts": {
"type:check": "npx tsc",
"format:check": "prettier --check \"src/**/*\"",
"format:write": "prettier --write \"src/**/*\"",
"lint:check": "eslint \"App.tsx\" \"src/**/*\"",
"lint:fix": "eslint --fix \"App.tsx\" \"src/**/*\"",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-navigation/drawer": "^6.4.3",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-navigation/stack": "^6.2.2",
"#reduxjs/toolkit": "^1.8.4",
"dotenv": "^16.0.1",
"expo": "~46.0.6",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-gesture-handler": "~2.5.0",
"react-native-reanimated": "~2.9.1",
"react-native-screens": "~3.15.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.2",
"styled-components": "^5.3.5",
"expo-screen-orientation": "~4.3.0",
"expo-splash-screen": "~0.16.1",
"react-native-safe-area-context": "4.3.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#redux-devtools/core": "^3.13.1",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"#types/react-redux": "^7.1.24",
"#types/styled-components": "^5.1.26",
"#types/styled-components-react-native": "^5.1.3",
"#typescript-eslint/eslint-plugin": "^5.33.1",
"eslint": "^8.22.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.7.1",
"typescript": "^4.7.4"
}
}
app.json
{
"expo": {
"name": "placeholder",
"slug": "placeholder",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#1D1A1F"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"requireFullScreen": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#1D1A1F"
}
},
"web": {
"favicon": "./assets/images/favicon.png"
}
}
}
babel.config
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
}
}
app.tsx
import 'react-native-gesture-handler'
import Constants from 'expo-constants'
import { useState, useEffect } from 'react'
import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import * as ScreenOrientation from 'expo-screen-orientation'
import AsyncStorage from '#react-native-async-storage/async-storage'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components/native'
import store from './src/redux/store'
import { lightTheme, darkTheme } from './src/res/theme/theme'
import Loading from './src/screens/loading/loading'
import { logger } from './src/logger/logger'
import Application from './src/components/application/application'
// Function to keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync()
.then((data) => logger.log(`SplashScreen.preventAutoHideAsync() succeeded: ${data.toString()}`))
.catch(logger.warn)
logger.log('NODE_ENV: ', Constants?.manifest?.extra?.env) //eslint-disable-line
export const App = (): JSX.Element => {
const [fontsLoaded] = useFonts({
SedgwickAveDisplay: require('./assets/fonts/sedgwick-ave-display/SedgwickAveDisplay-Regular.ttf'),
QuicksandRegular: require('./assets/fonts/Quicksand/static/Quicksand-Regular.ttf'),
QuicksandSemiBold: require('./assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf'),
QuicksandBold: require('./assets/fonts/Quicksand/static/Quicksand-Bold.ttf')
})
const [loading, setLoading] = useState(true)
const [theme, setTheme] = useState('light')
const selectedTheme = theme === 'dark' ? darkTheme : lightTheme
// Load the app here
useEffect(() => {
// Hide splash screen after 2 seconds
setTimeout(() => {
SplashScreen.hideAsync()
.then((data) => logger.log(`SplashScreen.hideAsync() succeeded: ${data.toString()}`))
.catch(logger.warn)
}, 2000)
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
.then(() => {
logger.log('ScreenOrientation.lockAsync() succeeded')
return AsyncStorage.getItem('#theme')
})
.then((data) => {
if (data) setTheme(data)
setLoading(false)
})
.catch((e) => {
logger.warn(e)
setLoading(false)
})
}, [])
if (loading || !fontsLoaded) {
return <Loading />
}
return (
<SafeAreaProvider>
<Provider store={store}>
<ThemeProvider theme={selectedTheme}>
<Application />
</ThemeProvider>
</Provider>
</SafeAreaProvider>
)
}
export default App
Any help with this would be greatly appreciated, thank you!

Screen is not scrolling Expo web

I have just updated to the latest expo sdk 33, So I can use the expo web capabilities. The project appears to be working and I can navigate onto different screens but I can scroll on any of the screens.
Does anyone have any idea what I might be doing wrong or missing?
Expo-cli version is : '2.19.5'
I'm using Yarn
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "latest",
"expo": "next",
"expo-cli": "^2.19.5",
"expo-codemod": "^1.0.0",
"expo-constants": "latest",
"expo-image-manipulator": "latest",
"expo-image-picker": "latest",
"expo-intent-launcher": "latest",
"expo-permissions": "latest",
"firebase": "^5.8.1",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-firebaseui": "^3.1.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-alert-async": "^1.0.3",
"react-native-modal": "^9.0.0",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-picker-select": "^5.2.3",
"react-native-web": "^0.11.4",
"react-navigation": "^3.5.0-alpha.0",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"rxjs": "^6.3.3",
"schedule": "0.4.0",
"uuid": "^3.3.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"prettier": "1.16.4"
},
"prettier": {
"jsxBracketSameLine": true,
"arrowParens": "always",
"bracketSpacing": false
},
"private": true
}
App.js
const AppContainer = createBrowserApp(AppNavigator);
type Props = {};
export default class App extends Component<Props> {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<AppContainer
onNavigationStateChange={(prevState, currentState) => {
const currentScreen = getActiveRouteName(currentState);
const prevScreen = getActiveRouteName(prevState);
}}
ref={(navigatorRef) => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Provider>
);
}
}

Solved this wrapping my main View with ScrollView
<ScrollView>
<View>
</View>
</ScrollView>

Invalid Chai property: matchSnapshot

I've followed instructions here: https://www.npmjs.com/package/chai-jest-snapshot
I'm using the Create-React-App starter kit and am trying to write basic Jest tests for it.
I read here that we are not suppose to install jest if we are using that kit, so here is my full package.json.
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chai": "^4.1.2",
"chai-jest-snapshot": "^2.0.0",
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"react-test-renderer": "^16.4.2",
"sinon": "^6.1.5"
}
}
My Test:
import React from 'react';
import renderer from 'react-test-renderer';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import BitcoinWidget from './bitcoinWidget';
const props = {
logo: 'foo',
coin: {
price: 0
},
refresh: jest.fn()
};
// describe('<BitcoinWidget />', () => {
// it('renders three <BitcoinWidget /> components', () => {
// const wrapper = shallow(<MyComponent {...props}/>);
// expect(wrapper.find('header').length).toBe(1);
// });
// });
describe('Layout', () => {
test('renders children correctly', () => {
const wrapper = renderer
.create(
<BitcoinWidget {...props}/>
)
.toJSON();
expect(wrapper).to.matchSnapshot();
});
});
And finally the component I'm testing:
import React from 'react';
const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
return (
<div className="bitcoin-wrapper shadow">
<header>
<img src={logo} alt="Bitcoin Logo"/>
</header>
<div className="price">
Coinbase
${price}
</div>
<button className="btn striped-shadow white" onClick={refresh}>
<span>Refresh</span>
</button>
</div>
);
}
export default BitcoinWidget;
Any thoughts?

It was a problem with the packages, I didn't even need to use chai at all.
Here is my new package.json
Note the added "jest": config section:
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest src",
"test:watch": "jest src --watch"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"jest": {
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"chai-jest-snapshot": "^2.0.0",
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"enzyme-to-json": "^3.3.4",
"identity-obj-proxy": "^3.0.0",
"react-test-renderer": "^16.4.2",
"sinon": "^6.1.5"
}
}
And no my test works without chai:
import React from 'react';
import renderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// import { expect } from 'chai';
// import sinon from 'sinon';
configure({ adapter: new Adapter() });
import BitcoinWidget from './bitcoinWidget';
let wrapper;
const props = {
logo: 'foo',
coin: {
price: 0
},
refresh: jest.fn()
};
describe('<BitcoinWidget /> layout', () => {
beforeEach(() => {
wrapper = shallow(<BitcoinWidget {...props}/>);
});
it('renders correct markup', () => {
expect(wrapper.find('header').length).toBe(1);
expect(wrapper.find('button').length).toBe(1);
});
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
});
});