babel, jest: TypeError: (0, _connector2.default) ist keine Funktion

Question

Mein Test Test Fehler aus, aber meine App transpiliert (Webpack) und läuft ohne Fehler. Ich bin kürzlich zu babel-preset-env gewechselt, aber ich bekomme immer noch den gleichen Fehler. Stackoverflow zeigt weiterhin "Es sieht so aus, als ob dein Beitrag hauptsächlich aus Code besteht. Bitte füge weitere Details hinzu."

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/Komponenten/UIObject/index.jsx bis 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']); 
... 

auszukleiden

../../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; 

Konsolenausgabe:

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 

Zum Vergleich:

github issue

Answer 1

Sie haben eine zirkuläre Abhängigkeit in Ihrem Code. Sie können es in der stacktrace sehen:

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) 

Von unten nach oben:

3. connector.js:2:39 Diese Datei wird geladen und läuft

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

4. Weitere Dateien laden

5. Weitere Dateien laden

6. UIObject/index.jsx:17:109 diese Datei geladen wird, dann läuft

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

Aber dieser Zyklus nicht zur Arbeit gehen. connector.js blieben auf Schritt 3 ausgeführt wird, bevor es an die Linie bekam, dass

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

Bedeutung, wenn es um den Import in Schritt läuft 6, connector noch nicht existiert.

In einer realen ES6 Umgebung würde dieser Code tatsächlich eine Ausnahme wie werfen, wenn Sie

tun

connector() 
let connector = ... 

aber Babel behandelt nicht die Fälle, zur Zeit, so dass nur der Wert als undefined auftaucht.

Sie müssen Ihren Code so überarbeiten, dass diese zyklische Abhängigkeit nicht vorhanden ist.