使用 System.js 处理 css 导入的 React 组件的 Mocha 测试

Question

如何使用 System.js 处理所有 require/import 语句来制作 mocha 运行？我有一个 React 组件，它可以导入 CSS 文件。当运行ning 在浏览器 System.js 上加载时，它 plugin-css 处理 css 文件的导入。但是当运行ning 作为 Mocha 单元测试导入 css 文件时导致 Mocha 崩溃。

import '../../../dist/css/common/NavBar.css!';

抛出错误 Error: Cannot find module '../../../dist/css/common/NavBar.css!'

有没有人有类似的测试设置和运行ning？

Answer 1

您可能需要开始使用 Karma 和 System.js

的插件

https://www.npmjs.com/package/karma-systemjs

这里有一个 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);

Answer 2

我让它在 nodejs 本身中工作。我只需要将导入存根到 css 文件。其余的东西 babel 处理。这是我的 mocha 使用的 require 文件。

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': []
});

使用 System.js 处理 css 导入的 React 组件的 Mocha 测试

Mocha test of React component which uses System.js to handle css import

unit-testing

mocha.js

reactjs

systemjs