Unit testing React组件的Mocha测试,该组件使用System.js处理css导入
如何使mocha在System.js处理所有require/import语句的情况下运行?我有一个React组件,它导入CSS文件。在浏览器上运行时,System.js会被加载,它的Unit testing React组件的Mocha测试,该组件使用System.js处理css导入,unit-testing,reactjs,mocha.js,systemjs,Unit Testing,Reactjs,Mocha.js,Systemjs,如何使mocha在System.js处理所有require/import语句的情况下运行?我有一个React组件,它导入CSS文件。在浏览器上运行时,System.js会被加载,它的插件css会处理css文件的导入。但是当作为Mocha单元测试运行时,css文件的导入会导致Mocha崩溃 导入“../../dist/css/common/NavBar.css!”; 抛出错误 错误:找不到模块'../../../dist/css/common/NavBar.css!' 有人有类似的测试设置
插件css
会处理css文件的导入。但是当作为Mocha单元测试运行时,css文件的导入会导致Mocha崩溃
导入“../../dist/css/common/NavBar.css!”;
抛出错误
错误:找不到模块'../../../dist/css/common/NavBar.css!'
有人有类似的测试设置并在运行吗?您可能需要开始使用System.js和一个插件 下面是一个
karma.conf.js
让您开始:
module.exports = function(config) {
config.set({
browsers: [ 'Chrome' ],
singleRun: false,
frameworks: ['mocha', 'sinon', 'systemjs'],
plugins: [
'karma-systemjs'
'karma-chrome-launcher',
'karma-chai',
'karma-mocha',
'karma-sourcemap-loader',
'karma-spec-reporter',
'karma-mocha-reporter',
'karma-sinon'
],
files: [
'test/bootstrap.js'
],
reporters: [ 'spec' ],
systemjs: {
// Path to your SystemJS configuration file
configFile: 'app/system.conf.js',
// Patterns for files that you want Karma to make available, but not loaded until a module requests them. eg. Third-party libraries.
serveFiles: [
'lib/**/*.js'
],
// SystemJS configuration specifically for tests, added after your config file.
// Good for adding test libraries and mock modules
config: {
paths: {
'angular-mocks': 'bower_components/angular-mocks/angular-mocks.js'
}
}
}
});
};
在test/bootstrap.js
中,可能是这样的:
//test/bootstrap.js
//put this in your test directory (include it with your tests or test recursively)
// setup globals
chai = require('chai');
chai.should();
chai.use(require('chai-things'));
assert = require('chai').assert;
expect = require('chai').expect;
should = require('chai').should;
React = require('react/addons');
global.TestUtils = React.addons.TestUtils;
ReactTools = require('react-tools');
reactStub = React.createClass({
displayName: 'StubClass',
mixins: [],
render: function() {
return null;
}
});
// setup
before(function(){
});
beforeEach(function(){
});
// teardown
afterEach(function() {
});
after(function(){
});
// include all the tests
var context = require.context('./', true, /-test\.js$/);
context.keys().forEach(context);
我让它在nodejs中工作。我只需要将导入的内容剔除到css文件中。巴贝尔处理的其他事情。这是我的要求文件,摩卡使用
process.env.BABEL_DISABLE_CACHE = 1;
require('babel-core/register')({
'optional': [
'es7.classProperties'
],
'resolveModuleSource': function (source) {
if (source.indexOf('dist/css') !== -1) {
return '../../../test/css-dummy.js';
}
return source;
},
'blacklist': []
});
我让摩卡在nodejs中运行,请检查我的答案。但我认为从长远来看,我会转向这个因果报应的设置。似乎业力得到了更好的维护,对覆盖范围和所有方面都有很好的支持。