Jest: Cannot read property 'default' of undefined during test

[NikosCha]

Hello.

I created a react app via create-react-app and I am trying to test it but i have an issue.
Here is my json.package file

{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",
"@material-ui/core": "^3.1.2",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"cors": "^2.8.4",
"dotenv": "^5.0.1",
"email-validator": "^2.0.4",
"eosjs": "^16.0.9",
"google-maps-react": "^2.0.2",
"history": "^4.7.2",
"ipfs-http-client": "^28.1.1",
"jquery": "^3.3.1",
"jwt-decode": "^2.2.0",
"node-sass": "^4.9.3",
"npm": "^6.4.1",
"nstall": "^0.2.0",
"object-assign": "^4.1.1",
"postcss-flexbugs-fixes": "^3.3.0",
"postcss-loader": "^2.1.6",
"promise": "^8.0.1",
"qrcode.react": "^0.8.0",
"query-string": "^6.1.0",
"rc-steps": "^3.3.0",
"rc-time-picker": "^3.3.1",
"react": "^16.3.2",
"react-app": "^1.1.2",
"react-bootstrap-datetimerangepicker-edited": "^2.0.8",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-table-next": "^1.4.1",
"react-datepicker": "^2.4.0",
"react-dev-utils": "^5.0.2",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.3.2",
"react-dropdown": "^1.4.2",
"react-error-overlay": "^4.0.1",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.0.0",
"react-google-recaptcha": "^1.0.5",
"react-helmet": "^5.2.0",
"react-jss": "^8.6.1",
"react-modal": "^3.6.1",
"react-password-strength": "^2.4.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.0.0",
"react-select": "^1.2.1",
"react-show-more": "^2.0.0",
"react-tagsinput": "^3.19.0",
"react-test-renderer": "^16.8.6",
"reactstrap": "^6.0.1",
"sass-loader": "^7.1.0",
"socket.io": "^2.1.1",
"style-loader": "^0.21.0",
"url-loader": "^1.1.1",
"uuid": "^3.3.2",
"validator": "^10.7.1",
"whatwg-fetch": "^2.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"fix": "eslint --fix src"
},
"jest": {
"collectCoverageFrom": [
"src//.{js,jsx}",
"!/node_modules/*"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"css-loader": "^2.1.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-standard": "^3.0.1",
"img-loader": "^3.0.0",
"stylelint-config-standard": "^18.2.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

and here is my test which is very simple

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from '../containers';

it('renders without crashing', () => {
const div = document.createElement('div');
expect(3).toBe(3)
});

so when run test i have the following error

TypeError: Cannot read property 'default' of undefined

  at Object.get [as EmailSender] (src/routes/index.js:65:25)
  at Object.EmailSender (src/index.js:37:22)
  at Object.<anonymous> (src/functions/getSettingsDataFromStore.js:1:1)
  at Object.<anonymous> (src/routes/register/RegisterDescription.js:9:1)
  at Object.<anonymous> (src/routes/index.js:6:1)
  at Object.<anonymous> (src/functions/getAvailableRoutes.js:4:1)
  at Object.<anonymous> (src/components/Navbar.js:4:1)
  at Object.<anonymous> (src/components/index.js:6:1)
  at Object.<anonymous> (src/containers/App.js:4:1)
  at Object.<anonymous> (src/containers/index.js:1:1)
  at Object.<anonymous> (src/tests/App.test.js:3:1)

When I remove the import { App } from '../containers'; the test runs succesfully.

Any idea? Thank you in advance

[thymikee]

And we don't know what's inside App and EmailSender. This is likely issue with your code node testing environment, please ask for help on Discord or Stack Overflow

[cashwani]

I am having the same issue, Till now according to my finding I see the error is because of naming import/export

like in my code I have

import { toJS } from '../toJS'

if I change to export default toJS and import like below

import toJS from '../toJS'

I don't get the error for this.

But converting all named export to the default export won't be possible for my project as the project is old and big in itself.

File toJS.js

const toJS = WrappedComponent => wrappedComponentProps => {
     // code here 
}

export {
  toJs,
  // ....
}

Though I am not very sure if I am missing something here.

Do anyone have any suggestions. It will be much help.

[Bastardly]

I had the same problem, but my solution wasn't that straight forward. I had a "rogue export", that was called from just about everywhere.
In the same file, I had a React component which was the default export. The component didn't have any relation to that "rogue export".

My problem occurred every time I tried to use anything outside the scope of the "rogue export". My guess is that it triggered some kind of circular dependency - I don't exactly know tbh.

The solution was to isolate the "rogue export" in it's own file.

Finding the export is pretty easy. It's the one that tries to call the function/const/import that is undefined.

[ladisays]

@NikosCha have you been able to resolve this issue? If so, care to share how? I'm also running into the same issue

[hamzahamidi]

The issue can be caused by hidden circular dependencies