I am trying to successfully run the boiler place App-test.js test that comes with the react-native installation. I have seen this test work "out of the box" with other projects, however, mine fails due to our integration with Firebase SDK. The long-term goal is to build out a test suite that mocks the calls to our firebase SDK (want to explore the following solutions: https://medium.com/stories-from-upstatement/jest-mocks-roasting-on-an-open-firestore-36fa55b76953, How do you mock Firebase Firestore methods using Jest? ), but I am stuck at the opening gates.
Here was the initial error I was receiving when trying to run the following command:
npm test __tests__/App-test.js
Error:
import { getFirebaseRoot } from './internal/registry/namespace';
export default () => ({
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
> 2 | import firebase from '@react-native-firebase/app';
| ^
3 | import analytics from '@react-native-firebase/analytics';
4 | import '@react-native-firebase/auth';
5 | import '@react-native-firebase/database';
It appears that our App.js file is the culprit.
import React from 'react';
import firebase from '@react-native-firebase/app';
import analytics from '@react-native-firebase/analytics';
import '@react-native-firebase/auth';
import '@react-native-firebase/database';
import '@react-native-firebase/crashlytics';
import '@react-native-firebase/functions';
import '@react-native-firebase/storage';
import { Provider } from 'react-redux';
import store from './app/store';
import Navigator from './app/routes';
import { loginUser } from './app/domain/Common/auth/actions';
export default class App extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
// gets the current screen from navigation state
getActiveRouteName = (navigationState) => {
let routeName = null;
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
// dive into nested navigators
if (route.routes) {
return getActiveRouteName(route);
}
routeName = route.routeName;
// for venues, append specific venue name
if (route.params && route.params.venueName) {
routeName += ` - ${route.params.venueName}`;
}
return routeName;
}
render() {
return (
<Provider store={store}>
<Navigator
onNavigationStateChange={(prevState, currentState) => {
// track user screen changes in Analytics
const currentScreen = this.getActiveRouteName(currentState);
const prevScreen = this.getActiveRouteName(prevState);
if (prevScreen !== currentScreen) {
analytics().setCurrentScreen(currentScreen);
}
}} />
</Provider>
);
}
}
After researching this issue, the most promising lead to resolve the problem appears to be the following, https://github.com/invertase/react-native-firebase/issues/3035.
But I am now stuck with a new error:
FAIL __tests__/App-test.js
● Test suite failed to run
/Users/kyjelly/micturnTwo/node_modules/react-native/Libraries/Utilities/warnOnce.js:15
const warnedKeys: {[string]: boolean} = {};
^^^^^^^^^^
SyntaxError: Missing initializer in const declaration
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 3.101s
Here is the jest portion of my pacakge.json
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@react-native-firebase/app)"
]
}
And here is my jest.config.js
module.exports = {
verbose: true,
moduleNameMapper: {
'@react-native-firebase/crashlytics': '<rootDir>/__tests__/__mocks__/firebase/crashlytics.js',
}
};
Can anyone point my in the right direction? As I understand it, Jest has issues compiling certain files that are not native Javascript. But every solution I try leads to another rabbit hole of configuration attempts.