单元测试用例无法加载需要加载 css 的基于 webpack 的 js 文件答案

【问题标题】：Unit test case is failing to load webpack based js file having require to load css单元测试用例无法加载需要加载 css 的基于 webpack 的 js 文件
【发布时间】：2015-09-04 19:26:15
【问题描述】：

我正在使用 Webpack 来捆绑我的 Angular js 代码。但是我无法编写基于 mocha 的单元测试用例 bcz gulp-mocha 未能“要求”css。以下是代码sn-p了解详情。

Benefits.js 角度 js 指令：

var Utilities = require("./../../../../../utilities/Utilities");
var AppUtilities = require("./../../../../../utilities/AppUtilities");
require("./../../../../css/benefits.css");
module.exports = {
    getBenefits: function ($sce) {
        return {
            restrict: "E",
            template: require('html!./../../../../templates/page/Benefits.html'),
            replace: true,
            scope: {
                benefits: '=',
                productPageBenefits: '=',
                divider: '='
            },
            link: function (scope, element, attrs) {

                //get benefit details as per given list of key
                scope.getBenefitsList = function (benefitKeyList, benefits) {
                    return OpensiteUtilities.getBenefitsList(benefitKeyList, benefits);
                };

            }
        };
    }
};

Benefits_test.js 是单元测试用例文件：

describe('The Benefits', function () {
    var Benefits = require('../../../../../../../../application/client-src/js/application/directives/productpage/Benefits.js');

    beforeEach(function () {

    });

    it('Should be an Object', function () {
        Benefits.should.be.a('Object');
        expect(Benefits).to.have.property('getBenefits');       
    });

});

我开始犯错误

/my/path/application/client-src/css/benefits.css:1
(function (exports, require, module, __filename, __dirname) { @media (min-widt
                                                              ^
[16:18:49] { [SyntaxError: Unexpected token ILLEGAL]
  name: 'SyntaxError',
  message: 'Unexpected token ILLEGAL',
  stack: 'SyntaxError: Unexpected token ILLEGAL\n    at Module._compile (module.js:439:25)\n    at Object.Module._extensions..js (module.js:474:10)\n    at Module.load (module.js:356:32)\n    at Function.Module._load (module.js:312:12)\n    at Module.require (module.js:364:17)\n    at require (module.js:380:17)\n    at Object.<anonymous> (/my/path/application/client-src/js/application/directives/productpage/Benefits.js:9:1)\n    at Module._compile (module.js:456:26)\n    at Object.Module._extensions..js (module.js:474:10)\n    at Module.load (module.js:356:32)\n    at Function.Module._load (module.js:312:12)\n    at Module.require (module.js:364:17)\n    at require (module.js:380:17)\n    at Suite.<anonymous> (/my/path/test/application/client-src/js/application/directives/productpage/Benefits_test.js:20:20)\n    at context.describe.context.context (/my/path/node_modules/jumpstart-engine/node_modules/gulp-mocha/node_modules/mocha/lib/interfaces/bdd.js:75:10)\n    at Object.<anonymous> (/my/path/test/application/client-src/js/application/directives/productpage/Benefits_test.js:19:1)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-mocha' }

我了解它失败的 bcz gulp-mocha 无法理解“css”文件。我如何编写测试用例？我是否在指令代码之外移动了“require(./../benefits.css)”？

我想将所有依赖项保留在相同的指令代码中（使用 webpack）。请帮忙

【问题讨论】：

标签： angularjs mocha.js webpack webpack-style-loader

【解决方案1】：

一种选择是通过mocha-loader 触发Mocha，并设置CSS 通过null-loader 加载。这应该可以解决您遇到的require 问题。

如果你想在 Webpack 之外解决它，你需要以某种方式修补 require。我希望您在这种情况下会想要使用 proxyquire、mockery 或 rewire 之类的东西。

【讨论】：