设置 karma、chai、requirejs、chai-jquery
Setting up karma, chai, requirejs, chai-jquery
我即将使用 Karma 进行 运行 测试,但我错过了最后一步(我认为),让 chai-jquery
正常运行,我尝试了两个不同的插件https://www.npmjs.com/package/karma-chai-jquery and https://www.npmjs.com/package/karma-jquery-chai 没有成功,即使遵循了各种 github 问题或自述文件中设置的指定顺序也是如此。
这是我的 tests-main.js
文件
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(file);
}
});
require.config({
baseUrl: '/base',
paths: {
'chai': 'node_modules/chai/chai',
'chai-jquery': 'node_modules/chai-jquery/chai-jquery',
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery',
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
},
deps: allTestFiles,
callback: window.__karma__.start
});
这是我的karma.conf.js
(删除了所有非关键或默认选项)
// Karma configuration
module.exports = function(config) {
config.set({
basePath: '',
// Can't use chai in here for whatever reason
frameworks: ['mocha', 'requirejs'],
files: [
'static/scripts-test/test-main.js',
{pattern: 'node_modules/chai/chai.js', included: true},
{pattern: 'static/scripts-test/**/*.js', included: false},
{pattern: 'static/scripts/sn/**/*.js', included: false}
],
exclude: [
'static/scripts/global.js'
],
browsers: ['PhantomJS']
});
};
这是一个 "working" 规范文件,它正确地使用了对 chai
和 jquery
的引用,但每次加载 chai-jquery
都失败。
define([
'chai',
'jquery',
'static/scripts/sn/widgets/dismissable'
], function(chai, $) {
chai.should();
chai.expect();
describe('Dismissable', function() {
var $el = $('</p>'),
closeBtnSel = '.js-dismissable-close-btn';
beforeEach(function() {
$('body').append('<div id="fixtures"></div>');
$el.appendTo('#fixtures').dismissable({closeFn: 'hide'});
});
afterEach(function() {
$el.remove();
});
it('should correctly create the HTML', function() {
$(closeBtnSel).should.exist;
$el.should.have.class('dismissable');
});
});
});
我得到的错误是:
TypeError: 'undefined' is not an object (evaluating '$(closeBtnSel).should.exist')
这是我的目录结构:
- static/
- scripts/
- scripts-test/
- test-main.js
- node_modules/
- karma.conf.js
最后,我的 package.json
{
"devDependencies": {
"chai": "^2.3.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.1.4",
"karma-chai": "^0.1.0",
"karma-mocha": "^0.1.10",
"karma-requirejs": "*",
"mocha": "^2.2.5",
"requirejs": "^2.1.18",
"should": "^6.0.1"
}
}
我经常遇到的一些错误:
更改 karma.conf
中框架的顺序时
throw error('No provider for "' + name + '"!');
^
Error: No provider for "framework:chai"! (Resolving: framework:chai)
即使在安装插件后
有时我会得到这样的信息:
Error: Mismatched anonymous define() module: function ($) {
return function (chai, utils) {
return chaiJquery(chai, utils, $);
};
}
任何帮助将不胜感激,我无法解决这个问题。
编辑:根据 Louis
的建议进行的小改动
要安装"should"API,您应该chai.should()
,即调用函数。 var should = chai.should
行没有做任何有用的事情。
我最初并不清楚 should
的问题是否导致了一连串的问题,或者是否还有其他问题。我又看了一眼,发现问题确实比较多
RequireJS 从 CDN + Karma 加载
Karma 中似乎存在错误。请参阅 this issue, which is still open. There's also that issue,它已关闭但似乎提供了信息。所以我用本地副本替换了 CDN。否则,我得到:
ERROR: There is no timestamp for //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js!
柴
一个问题是您必须决定是要使用 script
元素还是通过 RequireJS 加载 chai
。您问题中的代码尝试执行 both,这可能会导致问题。我决定让它由 RequireJS 加载。这意味着它应该有 included: false
.
chai-jquery
您的测试文件没有加载 chai-jquery
并且没有要求 chai
使用它。因此,就您的代码而言,它是不存在的。您报告的间歇性加载问题可能是由其他测试文件中的代码引起的。 require.config
调用有 deps: allTestFiles
,但这没有指定任何顺序。 RequireJS 可以自由地以任何顺序加载 allTestFiles
中的文件。
一个例子
我以您在问题中发布的代码作为示例的基础。显然,我没有你这边的所有代码。
这是新的 karma.conf.js
:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'requirejs'],
files: [
'static/scripts-test/test-main.js',
{pattern: 'node_modules/chai/chai.js', included: false},
{pattern: 'node_modules/jquery/dist/jquery.min.js',
included: false},
{pattern: 'node_modules/chai-jquery/chai-jquery.js',
included: false},
{pattern: 'static/scripts-test/**/*.js', included: false},
{pattern: 'static/scripts/sn/**/*.js', included: false}
],
exclude: [
'static/scripts/global.js'
],
browsers: ['PhantomJS']
});
};
在本地加载 jQuery 的新 static/scripts-test/test-main.js
:
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(file);
}
});
require.config({
baseUrl: '/base',
paths: {
'chai': 'node_modules/chai/chai',
'chai-jquery': 'node_modules/chai-jquery/chai-jquery',
'jquery': 'node_modules/jquery/dist/jquery.min',
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
},
deps: allTestFiles,
callback: window.__karma__.start
});
一个正确的测试文件名为static/scripts-test/foo.spec.js
,注意使用chai.use(chai_jquery)
:
define([
'chai',
'jquery',
'chai-jquery',
], function(chai, $, chai_jquery) {
chai.should();
chai.use(chai_jquery);
describe('example', function() {
it('body should exist', function() {
$(document.body).should.exist;
});
it('#blah should not exist', function() {
$("#blah").should.not.exist;
});
});
});
上面的代码运行没有问题:
WARN [watcher]: Pattern "/tmp/t5/static/scripts/sn/**/*.js" does not match any file.
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 43.0.2357 (Linux 0.0.0)]: Connected on socket Za9vBp9shDedsIhcNn63 with id 48683492
Chrome 43.0.2357 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.002 secs)
我使用 Chrome 作为我的浏览器,但这是唯一的区别。
我即将使用 Karma 进行 运行 测试,但我错过了最后一步(我认为),让 chai-jquery
正常运行,我尝试了两个不同的插件https://www.npmjs.com/package/karma-chai-jquery and https://www.npmjs.com/package/karma-jquery-chai 没有成功,即使遵循了各种 github 问题或自述文件中设置的指定顺序也是如此。
这是我的 tests-main.js
文件
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(file);
}
});
require.config({
baseUrl: '/base',
paths: {
'chai': 'node_modules/chai/chai',
'chai-jquery': 'node_modules/chai-jquery/chai-jquery',
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery',
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
},
deps: allTestFiles,
callback: window.__karma__.start
});
这是我的karma.conf.js
(删除了所有非关键或默认选项)
// Karma configuration
module.exports = function(config) {
config.set({
basePath: '',
// Can't use chai in here for whatever reason
frameworks: ['mocha', 'requirejs'],
files: [
'static/scripts-test/test-main.js',
{pattern: 'node_modules/chai/chai.js', included: true},
{pattern: 'static/scripts-test/**/*.js', included: false},
{pattern: 'static/scripts/sn/**/*.js', included: false}
],
exclude: [
'static/scripts/global.js'
],
browsers: ['PhantomJS']
});
};
这是一个 "working" 规范文件,它正确地使用了对 chai
和 jquery
的引用,但每次加载 chai-jquery
都失败。
define([
'chai',
'jquery',
'static/scripts/sn/widgets/dismissable'
], function(chai, $) {
chai.should();
chai.expect();
describe('Dismissable', function() {
var $el = $('</p>'),
closeBtnSel = '.js-dismissable-close-btn';
beforeEach(function() {
$('body').append('<div id="fixtures"></div>');
$el.appendTo('#fixtures').dismissable({closeFn: 'hide'});
});
afterEach(function() {
$el.remove();
});
it('should correctly create the HTML', function() {
$(closeBtnSel).should.exist;
$el.should.have.class('dismissable');
});
});
});
我得到的错误是:
TypeError: 'undefined' is not an object (evaluating '$(closeBtnSel).should.exist')
这是我的目录结构:
- static/
- scripts/
- scripts-test/
- test-main.js
- node_modules/
- karma.conf.js
最后,我的 package.json
{
"devDependencies": {
"chai": "^2.3.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.1.4",
"karma-chai": "^0.1.0",
"karma-mocha": "^0.1.10",
"karma-requirejs": "*",
"mocha": "^2.2.5",
"requirejs": "^2.1.18",
"should": "^6.0.1"
}
}
我经常遇到的一些错误:
更改 karma.conf
throw error('No provider for "' + name + '"!');
^
Error: No provider for "framework:chai"! (Resolving: framework:chai)
即使在安装插件后
有时我会得到这样的信息:
Error: Mismatched anonymous define() module: function ($) {
return function (chai, utils) {
return chaiJquery(chai, utils, $);
};
}
任何帮助将不胜感激,我无法解决这个问题。
编辑:根据 Louis
的建议进行的小改动要安装"should"API,您应该chai.should()
,即调用函数。 var should = chai.should
行没有做任何有用的事情。
我最初并不清楚 should
的问题是否导致了一连串的问题,或者是否还有其他问题。我又看了一眼,发现问题确实比较多
RequireJS 从 CDN + Karma 加载
Karma 中似乎存在错误。请参阅 this issue, which is still open. There's also that issue,它已关闭但似乎提供了信息。所以我用本地副本替换了 CDN。否则,我得到:
ERROR: There is no timestamp for //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js!
柴
一个问题是您必须决定是要使用 script
元素还是通过 RequireJS 加载 chai
。您问题中的代码尝试执行 both,这可能会导致问题。我决定让它由 RequireJS 加载。这意味着它应该有 included: false
.
chai-jquery
您的测试文件没有加载 chai-jquery
并且没有要求 chai
使用它。因此,就您的代码而言,它是不存在的。您报告的间歇性加载问题可能是由其他测试文件中的代码引起的。 require.config
调用有 deps: allTestFiles
,但这没有指定任何顺序。 RequireJS 可以自由地以任何顺序加载 allTestFiles
中的文件。
一个例子
我以您在问题中发布的代码作为示例的基础。显然,我没有你这边的所有代码。
这是新的 karma.conf.js
:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'requirejs'],
files: [
'static/scripts-test/test-main.js',
{pattern: 'node_modules/chai/chai.js', included: false},
{pattern: 'node_modules/jquery/dist/jquery.min.js',
included: false},
{pattern: 'node_modules/chai-jquery/chai-jquery.js',
included: false},
{pattern: 'static/scripts-test/**/*.js', included: false},
{pattern: 'static/scripts/sn/**/*.js', included: false}
],
exclude: [
'static/scripts/global.js'
],
browsers: ['PhantomJS']
});
};
在本地加载 jQuery 的新 static/scripts-test/test-main.js
:
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(file);
}
});
require.config({
baseUrl: '/base',
paths: {
'chai': 'node_modules/chai/chai',
'chai-jquery': 'node_modules/chai-jquery/chai-jquery',
'jquery': 'node_modules/jquery/dist/jquery.min',
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
},
deps: allTestFiles,
callback: window.__karma__.start
});
一个正确的测试文件名为static/scripts-test/foo.spec.js
,注意使用chai.use(chai_jquery)
:
define([
'chai',
'jquery',
'chai-jquery',
], function(chai, $, chai_jquery) {
chai.should();
chai.use(chai_jquery);
describe('example', function() {
it('body should exist', function() {
$(document.body).should.exist;
});
it('#blah should not exist', function() {
$("#blah").should.not.exist;
});
});
});
上面的代码运行没有问题:
WARN [watcher]: Pattern "/tmp/t5/static/scripts/sn/**/*.js" does not match any file.
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 43.0.2357 (Linux 0.0.0)]: Connected on socket Za9vBp9shDedsIhcNn63 with id 48683492
Chrome 43.0.2357 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.002 secs)
我使用 Chrome 作为我的浏览器,但这是唯一的区别。