Import reagiert Komponenten mit absolutem Pfad

Question

Hier ist meine Testdatei

// /imports/components/main.test.js 
import React from 'react' 
import { shallow, mount } from 'enzyme' 
import Main from './main' 
import TextInput from "/imports/ui/textInput" 
... 

und die main.js hat

// /imports/components/main.js 
import { action1 } from "/imports/actions/myAction" 

aber es wirft einen Fehler, wenn ich den Test ausführen, sagte

Cannot find module '/imports/actions/myAction' from 'main.js'

Wenn ich die import './main' kommentieren, passiert das gleiche mit dem Importieren von T extInput. Ich habe kein Problem mit dem Importieren von Modulen in node_modules.

Wie kann ich Jest oder Webpack anweisen, die Komponente mit dem absoluten Pfad vom Projektverzeichnis (d. H. import Foo from /imports/...) zu importieren?

Answer 1

Meine Dateistruktur folgt genau dem gleichen Muster wie Sie. Um Jest beizubringen, Importe mit einer / zu verwenden, verwende ich babel-plugin-module-resolver und seine handliche root Option. Mein .babelrc für Jest sieht wie folgt aus:

{ 
    "presets": ["es2015", "meteor"], 
    "plugins": [ 
    "transform-class-properties", 
    "transform-react-constant-elements", 
    "transform-react-inline-elements", 
    "transform-react-remove-prop-types", 
     ["module-resolver", { 
     "root": ["../"], 
     "alias": { 
     "react-router-dom": "react-router-dom/umd/react-router-dom.min.js", 
     "redux": "redux/dist/redux.min.js", 
     "react-redux": "react-redux/dist/react-redux.min.js" 
     } 
    }] 
    ] 
} 

Wie ich Meteor bin mit, die ihre Wurzel Importe besonders angefertigt, ich verstecke meine Jest Nutzung und Konfiguration in ein .jest Verzeichnis an der Wurzel meines Repository erlaubt mir, eine bestimmte zu haben .babelrc ohne Konflikte mit Meteor zu riskieren.