Webpackとカルマテスト：未知のReferenceError：jQueryが定義されていません

Question

私はこのライブラリに奇妙な問題があります。私は見た目

externals: { 
    jquery: 'jQuery' 
    }, 

私はそれは私のテストが正常にカルマを介して実行することができます削除npm testを実行すると、これは、エラーの原因を持っている私のWebPACKを設定しています。私はそれを削除した場合しかし、それは私がその時点でレンダリングしたときに、私はエラーを取得し、外部のjQueryを削除した場合、私は

require('style!css!foundation-sites/dist/foundation.min.css') 
$('document').foundation(); //This is where it errors 

だから私のapp.jsxで私の基礎を実行することはできません。 externals jquery： 'jQuery'を追加すると、テストが中断されます。誰でもどのようにそれを修正するか考えている。 jQueryは私のnpmモジュールの一部です。

Answer 1

npm install jquery --save 

は、その後、あなたのモジュールに直接jqueryが必要です。

var $ = require('jquery'); 
require('style!css!foundation-sites/dist/foundation.min.css'); 
$('document').foundation(); 

Answer 2

、私は多くのことをしようとした後、同じ正確なエラーを持っていたし、設定ファイルを書き換えます。なぜか、私はこれは動作しません。

のためのプラグインを変更 外観を削除します。

plugins: [ 
    new webpack.ProvidePlugin({ 
     'window.$': 'jquery', 
     'window.jQuery': 'jquery' 
    }) 
    ], 

結果：

テストファイル

var React = require('react'); 
var ReactDom = require('react-dom'); 
var expect = require('expect'); 
var $ = require('jquery'); 
var TestUtils = require('react-addons-test-utils'); 

var Clock = require('Clock'); 

describe('Clock',() => { 
    it ('should exist',() => { 
     expect(Clock).toExist(); 
    }); 
    describe('rebder',() => { 
     it('should render clock to output',() => { 
      var clock = TestUtils.renderIntoDocument(<Clock totalSeconds={62}/>); 
      var $el = $(ReactDom.findDOMNode(clock)); 
      var actualText = $el.find('.clock-text').text(); 
      expect(actualText).toBe('01:02'); 
     }); 
    }); 
    describe('formatSeconds',() => { 
     it('should format seconds',() => { 
      var clock = TestUtils.renderIntoDocument(<Clock/>); 
      var seconds = 615; 
      var expected = '10:15'; 
      var actual = clock.formatSeconds(seconds); 

     expect(actual).toBe(expected); 
    }); 

    it('should format seconds when min/sec are less than 10',() => { 
     var clock = TestUtils.renderIntoDocument(<Clock/>); 
     var seconds = 61; 
     var expected = '01:01'; 
     var actual = clock.formatSeconds(seconds); 

     expect(actual).toBe(expected); 
     }); 
    }); 
}); 

P

var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'script!jquery/dist/jquery.min.js', 
    'script!foundation-sites/dist/foundation.min.js', 
    './app/app.jsx' 
    ], 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     'window.$': 'jquery', 
     'window.jQuery': 'jquery' 
    }) 
    ], 
    output: { 
    path: __dirname, 
    filename: './public/bundle.js' 
    }, 
    resolve: { 
    root: __dirname, 
    alias: { 
     Main: 'app/components/Main.jsx', 
     Timer: 'app/components/Timer.jsx', 
     Clock: 'app/components/Clock.jsx', 
     Navigation: 'app/components/Navigation.jsx', 
     Countdown: 'app/components/Countdown.jsx', 
     applicationStyles: 'app/styles/app.scss' 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'] 
     }, 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/ 
     } 
    ] 
    }, 
    devtool: 'cheap-module-eval-source-map' 
}; 

wepackfile ackage.json

{ 
    "name": "TimerApp", 
    "version": "1.0.0", 
    "description": "Simple react app", 
    "main": "index.js", 
    "scripts": { 
    "test": "karma start", 
    "start": "node server.js" 
    }, 
    "author": "Hyodo", 
    "license": "MIT", 
    "dependencies": { 
    "axios": "^0.9.1", 
    "express": "^4.13.4", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "react-router": "^2.0.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.5.1", 
    "babel-loader": "^6.2.2", 
    "babel-preset-es2015": "^6.5.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "css-loader": "^0.23.1", 
    "expect": "^1.14.0", 
    "foundation-sites": "6.2.0", 
    "jquery": "^2.2.1", 
    "karma": "^0.13.22", 
    "karma-chrome-launcher": "^0.2.2", 
    "karma-mocha": "^0.2.2", 
    "karma-mocha-reporter": "^2.0.0", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-webpack": "^1.7.0", 
    "mocha": "^2.4.5", 
    "node-sass": "^3.4.2", 
    "react-addons-test-utils": "^0.14.6", 
    "sass-loader": "^3.1.2", 
    "script-loader": "^0.6.1", 
    "style-loader": "^0.13.0", 
    "webpack": "^1.12.13" 
    } 
} 

これはあなたまたは誰かに役立つことを望みます。私はUdemyでReactコースを受けた後、この問題を抱えています。それは少し時代遅れですが、テストの部分は私が探していたものでした。問題はこの種の設定です。