[英]Webpack and Karma Testing: Uncaught ReferenceError: jQuery is not defined using
I am having a weird issue with this library. 我在这个图书馆遇到一个奇怪的问题。 I have set up my webpack to have an externals
我已经将Webpack设置为具有外部组件
externals: {
jquery: 'jQuery'
},
this causes an error when i run npm test
removing it allows my tests to run through karma correctly. 当我运行
npm test
删除它会导致我的测试正确通过业力运行时,这会导致错误。 However if i remove it, it doesn't allow me to run my foundation in my app.jsx 但是,如果我删除它,它不允许我在我的app.jsx中运行我的基金会
require('style!css!foundation-sites/dist/foundation.min.css')
$('document').foundation(); //This is where it errors
So if i remove the jquery external i get an error when i render at that point. 因此,如果我在外部删除jquery,则在渲染时会收到错误消息。 If i add the externals jquery: 'jQuery' it breaks the testing.
如果我添加外部jQuery:'jQuery',则会破坏测试。 Anyone have any idea how to fix it.
任何人都知道如何解决它。 jQuery is part of my npm modules.
jQuery是我的npm模块的一部分。
npm install jquery --save
Then require jquery
directly in your module: 然后直接在模块中要求使用
jquery
:
var $ = require('jquery');
require('style!css!foundation-sites/dist/foundation.min.css');
$('document').foundation();
I had the same exact error, after trying a lot of things and rewrite the config files. 在尝试了很多事情并重写配置文件后,我遇到了同样的错误。 I don't why, but this works.
我不知道为什么,但这行得通。
Remove the externals Change the plugin for: 删除外部组件将插件更改为:
plugins: [
new webpack.ProvidePlugin({
'window.$': 'jquery',
'window.jQuery': 'jquery'
})
],
Results: 结果:
Test File 测试文件
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 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'
};
package.json package.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"
}
}
Hope this help you or somebody. 希望这可以帮助您或其他人。 I got this problem after following a React course at Udemy.
在Udemy上了React课程后,我遇到了这个问题。 It is a little outdated but the test part was exactly what I was looking for.
它有点过时了,但是测试部分正是我想要的。 The problem is this kind of config.
问题是这种配置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.