使用 Mocha 测试时处理 WebPack CSS 导入

Question

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

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

Answer 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

Answer 2

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

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

例如

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

使用 Mocha 测试时处理 WebPack CSS 导入

Handle WebPack CSS imports when testing with Mocha

javascript

mocha.js

webpack