Webpack和Karma測試：未捕獲ReferenceError：未定義jQuery使用

Question

我對這個庫有一個奇怪的問題。我已經建立了我的WebPack有一個的外部

externals: { 
    jquery: 'jQuery' 
    }, 

當我運行npm test刪除它可以讓我的測試中，通過因果報應正常運行將產生錯誤。但是如果我刪除它，它不會讓我在我的app.jsx運行我的基礎

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

所以，如果我刪除外部jQuery的我得到一個錯誤，當我在這一點上渲染。如果我添加外部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); 
     }); 
    }); 
}); 

wepackfile

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' 
}; 

p 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課程後，我遇到了這個問題。這有點過時了，但測試部分正是我所期待的。問題是這種配置。