使用 Mocha 进行测试时处理 WebPack CSS 导入答案

【问题标题】：Handle WebPack CSS imports when testing with Mocha使用 Mocha 进行测试时处理 WebPack CSS 导入
【发布时间】：2015-09-20 19:34:09
【问题描述】：

使用 WebPack，您可以像这样在代码中导入样式：import './PageSpinner.styl'; 但是当您尝试使用 Mocha 测试此代码时，您的测试将因 SyntaxError 而崩溃，因为引擎会尝试处理 JS 代码之类的样式。

如何使用 Mocha 测试这样的代码？

【问题讨论】：

标签： javascript mocha.js webpack

【解决方案1】：

我最近遇到了同样的问题，解决方案是通过 Mocha 编译器。

创建一个文件，我们称之为'css-null-compiler.js'，它有：

function noop() {
  return null;
}

require.extensions['.styl'] = noop;
// you can add whatever you wanna handle
require.extensions['.scss'] = noop;
require.extensions['.png'] = noop;
// ..etc

当您从命令行运行 mocha 时，将此文件作为编译器传递

mocha /your/test.spec.js --compilers css:css-null-compiler.js

【讨论】：

酷！你救了我的命。
这似乎不再解决问题，因为 require.extensions['...'] 已被弃用。 @brent 在下面为我解决了这个问题。

【解决方案2】：

这可以通过ignore-styles 包来完成。

安装包，然后在运行 mocha 时需要。

例如

mocha --require babel-register --require ignore-styles

【讨论】：