CODEWITHSUNDEEP
javascriptbabeljsjestjs
jduhls
jduhls

Reputation: 693

babel, jest: TypeError: (0 , _connector2.default) is not a function

My jest test errors out but my app transpiles (webpack) and runs without error. I did recently switch to babel-preset-env but I still get the same error.

relevant package.json:

"jest": "^20.0.4",
"jest-fetch-mock": "^1.0.8",
"babel-core": "^6.22.1",
"babel-jest": "^20.0.3",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",

.babelrc

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    ["inferno", {"imports": true}],
    ["transform-es2015-classes", {"loose": true}]
  ],
  "env": {
    "test": {
      "presets": ["es2015", "stage-0"]
    }
  }
}

src/js/modules/ui/components/UIObject/index.jsx up to line 17

import TwitterComponent from './twitter';
import AdComponent, { networks } from './ad';
import RssComponent from './rss';
import WwwComponent from './www';
import connector from '../../connector';
const types = ['twitter', 'ads', 'rss', 'www'];
const getTitleByType = (type, data) => {
    const titles = {
        twitter: data['data-widget-id'],
        ad: `${networks[data.network]} (${data.key})`,
        ads: `${networks[data.network]} (${data.key})`,
        rss: data.url,
        www: data.url
    };
    return titles[type];
};
const Ad = connector(AdComponent, ['noSubmit', 'ads']);
...

../../connector.js

import { connect } from 'inferno-redux';
import { actions } from './reducers/main';
import { bindActionCreators } from 'redux';
import Immutable from 'seamless-immutable';
const connector = (component, keys = null) => {
    const mapDispatchToProps = dispatch => {
        return bindActionCreators(Object.assign({}, actions), dispatch);
    };
    const mapStateToProps = state => {
        const _state = {};
        const stateKeys = Object.keys(Immutable.asMutable(state.main));
        for (let key of stateKeys) {
            if ((Array.isArray(keys) && keys.includes(key)) || keys === null) {
                _state[key] = Immutable.getIn(state.main, [key]);
            }
        }
        return _state;
    };
    return connect(mapStateToProps, mapDispatchToProps)(component);
};
export { connector };
export default connector;

console output:

FAIL  src/__tests__/modules/ui/components/Main/index.spec.jsx
  ● Test suite failed to run

    TypeError: (0 , _connector2.default) is not a function

      at Object.<anonymous> (src/js/modules/ui/components/UIObject/index.jsx:17:109)
      at Object.<anonymous> (src/js/modules/ui/components/UIObjectsComponent/index.jsx:2:43)
      at Object.<anonymous> (src/js/modules/ui/reducers/main.js:367:305)
      at Object.<anonymous> (src/js/modules/ui/connector.js:2:39)
      at Object.<anonymous> (src/js/modules/ui/components/Main/index.jsx:3:44)
      at Object.<anonymous> (src/__tests__/modules/ui/components/Main/index.spec.jsx:3:13)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        14.381s

For reference:

github issue

Upvotes: 3

Views: 4814

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161457

You have a circular dependency in your code. You can see it in the stacktrace:

at Object.<anonymous> (src/js/modules/ui/components/UIObject/index.jsx:17:109)
at Object.<anonymous> (src/js/modules/ui/components/UIObjectsComponent/index.jsx:2:43)
at Object.<anonymous> (src/js/modules/ui/reducers/main.js:367:305)
at Object.<anonymous> (src/js/modules/ui/connector.js:2:39)
at Object.<anonymous> (src/js/modules/ui/components/Main/index.jsx:3:44)
at Object.<anonymous> (src/__tests__/modules/ui/components/Main/index.spec.jsx:3:13)

From the bottom to the top:

  1. connector.js:2:39 this file is loading, and runs

    import { actions } from './reducers/main';

  2. More files load

  3. More files load

  4. UIObject/index.jsx:17:109 this file is loading, then runs

    import connector from '../../connector';

But this cycle is not going to work. connector.js stopped running on step 3, before it got to the line

const connector = (component, keys = null) => {

meaning that when it runs the import in step 6, connector doesn't exist yet.

In a real ES6 environment, this code would actually throw an exception like if you did

connector()
let connector = ...

but Babel doesn't handle those cases currently, so the value just shows up as undefined.

You'll have to rework your code such that this cyclic dependency is not present.

Upvotes: 6

Related Questions