Compatibility issues with create-react-app

[jshcrowthe]

[REQUIRED] Describe your environment

• Operating System version: macOS Sierra
• Firebase SDK version: 4.1.2
• Firebase Product: core (auth, database, storage, etc)

[REQUIRED] Describe the problem

Cross Posting from #26

I writing some unit for React with the Jest unit test framework but I got the following error while
TypeError: _firebase2.default.storage is not a function

Here the stacktrace :

` FAIL src/components/organisms/PriceSettingsBlock/PriceSettingsBlock.test.js
● Test suite failed to run

TypeError: _firebase2.default.storage is not a function

at Object. (src/core/firebase/firebase.js:8:120)
at Object. (src/core/firebase/firebase-list.js:1:815)
at Object. (src/core/chat/eventList.js:30:77)
at Object. (src/core/chat/sagas.js:4:44)
at Object. (src/core/chat/index.js:2:62)
at Object. (src/core/init/sagas.js:3:39)
at Object. (src/core/init/index.js:1:387)
at Object. (src/components/organisms/PriceSettingsBlock/PriceSettingsBlock.js:6:39)
at Object. (src/components/organisms/PriceSettingsBlock/PriceSettingsBlock.test.js:4:53)
at handle (node_modules/worker-farm/lib/child/index.js:41:8)
at process. (node_modules/worker-farm/lib/child/index.js:47:3)
at emitTwo (events.js:106:13)
at process.emit (events.js:194:7)
at process.nextTick (internal/child_process.js:766:12)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)`
Test file is here :
PriceSettingsBlock.js.txt
PriceSettingsBlock.test.js.txt

My configuration is here:
`import firebase from 'firebase';
import { firebaseConfig } from './config';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebaseApp.auth();
export const firebaseDb = firebaseApp.database();
// firebase.storage() seems to be null
export const firebaseStorage = firebase.storage();`

And my configuration ( config.js):

export const firebaseConfig = {
apiKey: 'my api key',
authDomain: 'my-project-id.firebaseapp.com',
databaseURL: 'https://my-project-id.firebaseio.com',
projectId: 'my-project-id',
storageBucket: 'my-project-id.appspot.com',
messagingSenderId: 'my-sender-id'
};

Any idea ?

Steps to reproduce:

@jshcrowthe I have create a new project with create-react-app:
https://github.com/ataliadvanstep/firebase-jest
Just clone the project and run npm test

Relevant Code:

https://github.com/ataliadvanstep/firebase-jest

[jshcrowthe]

Firebase leverages the browser field in its package.json. This allows us to ship a different binary for different environments in the same package. Jest, out of the box, does not respect this field (see: https://facebook.github.io/jest/docs/configuration.html#browser-boolean) and create-react-app, does not configure it when the JSDOM env is set.

I don't know if this is intentional on their side but I will raise the issue there. In the mean time, you can update the test script to be:

react-scripts test --env=jsdom --browser

Then your tests should pass as expected.

[gaearon]

Here is another solution for CRA:
facebook/create-react-app#2590 (comment)

[FrenchMajesty]

Hello Folks,

I am having the same problem and I tried the solutions above but I still get an ambiguous error:

Below is my package.json

{
  "dependencies": {
    "antd": "^3.6.1",
    "babel-preset-react-app": "^3.1.1",
    "enzyme": "^3.6.0",
    "firebase": "^5.0.4",
    "indicative": "^5.0.5",
    "jest-cli": "^20.0.4",
    "moment": "^2.22.2",
    "prop-types": "^15.6.1",
    "react": "^16.4.0",
    "react-avatar-image-cropper": "^1.1.7",
    "react-dom": "^16.4.0",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4",
    "react-spinners": "^0.3.2",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "NODE_PATH=src react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom --browser",
    "eject": "react-scripts eject"
  }
}

There are no online searches that yield relevant results to the issue I'm having.