creare un punto di ingresso di prova a reagire webpack applicazione

Question

TLDR: Sono in grado di require di tutto per rendere la corsa app, ma se mi require moduli dall'interno di un test (che è in app - vedere la struttura dir di seguito) file, l'intera catena di dipendenze si rompe.

sto avendo qualche difficoltà require -ing componenti dalla mia directory app/test (nel mio webpack applicazione React.js) al di sotto che non ho difficoltà a require -ing da qualsiasi altro file nella cartella /app. Questa è la struttura di directory

app 
    /components/checkout.jsx 
    /components/button.jsx 
    /test/test.js 
    index.jsx 
dist 
node_modules 
webpack.config.js 
package.json 

nei miei webpack.config.js, ce l'ho messa a punto di utilizzare la JSX-loader per la mia applicazione Reagire come questo

entry: { 
    app: "./app/index" 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.jsx$/, 
      loader: 'jsx-loader?insertPragma=React.DOM&harmony', 
    } 
    ] 
}, 
resolve: { 
extensions: ['', '.js', '.jsx'] 
} 

Questo mi permette di richiedere i file con estensione in estensione .jsx. Per esempio, in /app/index.jsx richiedo /app/components/checkout.jsx facendo

var Checkout = require('./components/Checkout') 

E dentro /app/components/checkout.jsx, richiedo il pulsante

var Button = require('./components/Button') 

così quando richiedo il Checkout dalla index.jsx, gestisce l'richiedono del Pulsante senza alcun problema.

Tuttavia, dalle app/test/test.js, faccio

var Checkout = require('../components/Checkout') 

e webpack non riesco a trovare il componente di Checkout. Quando visualizzo i test nel server di sviluppo webpack, non viene mostrato che l'estensione del file .jsx è stata cercata. Si cercato

app/components/Checkout 
app/components/Checkout.webpack.js 
app/components/Checkout.web.js 
app/components/Checkout.js 
app/components/Checkout.json 

Pertanto, ho cercato di usare il jsx-loader inline come questo

var Checkout = require(jsx-loader!'../components/Checkout') 

dalla directory di prova, e webpack può ora trovare il file, ma genera un errore dicendo che non può risolvere il pulsante che controlla requires. In altre parole, quando utilizzo lo require dalla cartella app/test, l'intera catena di dipendenze viene espulsa dalla sincronizzazione.

Come posso modificare il mio webpack.config.js per poter richiedere i file dell'applicazione nei miei test con questa struttura di directory o, più in generale, come configurare il webpack per richiedere un file dell'applicazione in un test?

Aggiornamento

Struttura del progetto

/app 
    /test/test.js 
    /index.jsx 
    /components/checkout.jsx (and button.jsx) 
/dist 
/node_modules 
package.json 
webpack.config.js 

tutta webpack config

var webpack = require('webpack'); 
module.exports = { 
    context: __dirname + "/app", 
    entry: { 
     vendors: ["d3", "jquery"], 
     app: "index" 
     // app: "./app/index" 

     }, 
    output: { 
     path: './dist', 
     filename: 'bundle.js', //this is the default name, so you can skip it 
     //at this directory our bundle file will be available 
     //make sure port 8090 is used when launching webpack-dev-server 
     publicPath: 'http://localhost:8090/assets/' 
    }, 

    externals: { 
     //don't bundle the 'react' npm package with our bundle.js 
     //but get it from a global 'React' variable 

     'react': 'React' 
     // 'd3': 'd3' 
    }, 
    resolve: { 
     modulesDirectories: ['app', 'node_modules'], 
     extensions: ['', '.js', '.jsx'], 
     resolveLoader: { fallback: __dirname + "/node_modules" }, 
     root: ['/app', '/test'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       loader: 'jsx-loader?insertPragma=React.DOM&harmony', 
      } 
     ] 
    }, 

    plugins: [ 
    // definePlugin, 
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') 

    ] 
} 

Answer 1

Una possibile soluzione potrebbe essere quella di sempre richiedere con estensione file:

var Checkout = require('./components/Checkout.jsx') 

Answer 2

Immagino che potrebbe essere l'impostazione di "test" come directory principale. Ma non è chiaro fino a quando non condividi il tuo codice. Puoi darmi un link al repository GitHub o qualcosa del genere?

Answer 3

vedo che stai usando il parametro harmony, posso presumere che stai usando, es6?

Se ho avuto questo problema in precedenza, il problema per me era che i file venivano aggiunti, come es6 senza essere trasformati, in es5 da jsx-loader/babel-loader.

quindi avevo bisogno di aggiungere:

preLoaders: [{ 
    test: [/\.jsx$/, /\.js$/], 
    include: // modules here 
    loaders: ['babel-loader?optional[]=runtime'] 
}] 

ma poi non spiegherebbe il motivo per cui questo viene a mancare solo per i test. forse puoi approfondire ciò che viene eseguito quando esegui i tuoi test ma per ora sono ancora sotto l'assunzione di te usando es6,

se la situazione di cui sopra non è il tuo caso, prova ad installare una versione locale di webpack, e cercarlo nella vostra dir locali, anche per la cartella app

(resolveLoader: { root: path.join(__dirname, "node_modules") }) 

speranza che questo aiuta

edit: ps guardando la vostra configurazione, resolveLoader non dovrebbe essere una parte della vostra volontà, in un altro di impostazione webpack Io uso, ho il seguente setup per la risoluzione:

resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    modulesDirectories: ['node_modules', 'node_modules/vl_tooling/node_modules'] 
}, 
resolveLoader: { 
    modulesDirectories: ['node_modules', 'node_modules/vl_tooling/node_modules'] 
}, 

Answer 4

ho configurato compito sorso separata per eseguire test Reagire, forse si potrebbe riutilizzare l'idea:

karma.js file di

var karma = require('gulp-karma'), 
    _ = require('lodash'), 
    Promise = require('bluebird'), 
    plumber = require('gulp-plumber'), 
    path = require('path'), 
    webpack = require('gulp-webpack'), 
    named = require('vinyl-named'); 

module.exports = function (gulp, options) { 
    var root = path.join(options.cwd, 'app'), 
    extensions = ['', '.js', '.jsx'], 
    modulesDirectories = ['node_modules']; 

    gulp.task('karma', ['karma:build'], function() { 
    return runAllTests(gulp, options); 
    }); 

    gulp.task('karma:build', function() { 
    var optionsForTests = _.merge({ 
     ignore: ['**/node_modules/**'] 
    }, options); 

    return gulp.src(['**/__tests__/*.js'], optionsForTests). 
     pipe(named(function(file){ 
     // name file bundle.js 
     return 'bundle'; 
     })). 
     pipe(webpack({ 
     module: { 
      loaders: [ 
       // runtime option adds Object.assign support 
       { test: /\.(js|jsx)$/, loader: 'babel-loader?optional[]=runtime', exclude: /node_modules/}, 
       { test: /\.(sass|scss)$/, loader: 'css-loader!sass-loader'}, 
       { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader'}, 
       { test: /\.(ttf|eot)$/, loader: 'file-loader'}, 
       { test: /sinon.*\.js$/, loader: 'imports?define=>false' } // hack due to https://github.com/webpack/webpack/issues/304 
      ] 
     }, 
     resolve: { 
      root: root, 
      extensions: extensions, 
      modulesDirectories: modulesDirectories 
     } 
     })). 
     pipe(gulp.dest('test-build')); 
    }) 

} 

function runAllTests(gulp, options) { 
    var optionsForTests = _.merge({ 
    ignore: ['**/node_modules/**'] 
    }, options); 

    return new Promise(function (resolve, reject) { 
    var karmaConfig = path.join(path.resolve(__dirname, '..'), 'karma.conf.js'); 

    // shim Prototype.function.bind in PhantomJS 1.x 
    var testFiles = [ 
     'node_modules/es5-shim/es5-shim.min.js', 
     'node_modules/es5-shim/es5-sham.min.js', 
     'test-build/bundle.js']; 

    gulp.src(testFiles). 
     pipe(plumber({ 
     errorHandler: function (error) { 
      console.log(error); 
      this.emit('end'); 
     } 
     })). 
     pipe(karma({ 
     configFile: karmaConfig, 
     action: 'run' 
     })). 
     on('end', function() { resolve(); }); 
    }); 
} 

Gulp:

var gulp = require('gulp'); 
var auctionataBuild = require('auctionata-build'); 
var path = require('path'); 

auctionataBuild.tasks.karma(gulp, { 
    cwd: path.resolve(__dirname) 
}); 

Run dal terminale :

gulp karma