utworzyć punkt wejścia Test w WebPacka reagować aplikacja

Question

tldr: Jestem w stanie require wszystko, aby uruchomić aplikację, ale gdybym require moduły z poziomu testu (który jest w aplikacji - patrz dir struktury poniżej) plik, cały łańcuch zależności ulega uszkodzeniu.

Mam pewne trudności require -ing komponenty z mojego katalogu app/test (w moim WebPACK aplikacji React.js) poniżej, że nie mam żadnych trudności require -ing z jakiegokolwiek innego pliku w folderze /app. Jest to struktura katalogów

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

w moich webpack.config.js, mam to setup używać JSX-ładowarka do mojego React wniosku jak ten

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

Pozwala mi to wymagać pliki kończące w rozszerzeniu .jsx. Na przykład, w /app/index.jsx wymagam /app/components/checkout.jsx wykonując

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

i wewnątrz /app/components/checkout.jsx, wymagam przycisk

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

więc kiedy wymagają Checkout z index.jsx, to uchwyty wymagać od Przycisk bez problemu.

Jednak z aplikacji/test/test.js, robię

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

i WebPack nie można znaleźć składnika Checkout. Kiedy przeglądam testy na serwerze deweloperskim webpack, nie pokazuje to, że szukano rozszerzenia pliku .jsx. To poszukiwanej

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

Dlatego starałem się używać jsx-loader inline jak ten

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

z katalogu testowego i WebPack mogą teraz znaleźć plik, ale zgłasza błąd mówiąc, że nie można rozwiązać przycisk służący do realizacji płatności requires. Innymi słowy, gdy używam require z folderu app/test, cały łańcuch zależności jest wyrzucany z synchronizacji.

Jak mogę zmienić mój webpack.config.js, aby móc wymagać plików aplikacji w moich testach z tą strukturą katalogów, lub, bardziej ogólnie, jak skonfigurować Webpack, aby wymagał pliku aplikacji w teście?

Aktualizacja

Struktura projektu

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

cały 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

Możliwym rozwiązaniem byłoby zawsze wymagają z rozszerzeniem:

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

Answer 2

Domyślam się, że może to być ustawienie "test" jako katalogu głównego. Ale nie jest jasne, czy nie udostępnisz swojego kodu. Czy możesz podać link do repozytorium GitHub?

Answer 3

Widzę, że używasz parametru harmonii, czy mogę założyć, że używasz, es6?

Jeśli tak, miałem ten problem wcześniej, problem polegał na tym, że pliki zostały dodane, jako es6 bez przekształcania, do es5 przez jsx-loader/babel-loader.

więc musiałem dodać:

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

ale wtedy nie byłoby wyjaśnić, dlaczego to nie tylko dla swoich badań. może możesz rozwinąć to, co jest uruchamiane, gdy uruchamiasz testy , ale na razie jestem nadal pod założeniem, że używasz es6,

jeśli powyższa sytuacja nie jest dla ciebie, spróbuj zainstalować lokalną wersję webpacka, i spojrzeć na nią w lokalnym katalogu, również do folderu app

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

nadzieję, że to pomaga

edit: ps patrząc na config, resolveLoader nie powinny być częścią twojej determinacji, w innej konfiguracji WebPACK Używam, mam następujące ustawienia do rozwiązania:

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

mogę skonfigurować oddzielne zadanie łyk uruchomić React testy, może można ponownie wykorzystać pomysł:

karma.js plik

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 z terminalem :

gulp karma