运行 mocha 使用 babel-node 和 babel-istanbul 测试时加载 css 时出错
error loading css when running mocha tests with babel-node and babel-istanbul
我在测试使用 webpack 导入 .scss 的 UI 组件时遇到问题。我正在直接测试组件代码，而不是导出的 webpack 包。
在我的 SUT 中
我有一些导入 scss 的代码：
import '!style!css!sass!postcss-loader!../style.scss'
当我 运行 测试时，此代码导致错误：
Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
便宜的解决方法
我一直在解决这个问题：
try {
require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }
但这闻起来很脏，我宁愿在我的 SUT 中没有这段代码。
运行 测试
我不知道如何在使用 babel-node 和 babel-istanbul[=43 时找到的解决方案中工作=] 而不是直接摩卡咖啡。这是我目前 运行 测试的方式：
$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive
我找到的所有答案都是直接针对 mocha 的，但我不是 运行宁测试：
$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive
?
我如何在编译器或安装文件中工作以告诉 mocha 忽略 .scss 文件。我相信 .svg 文件接下来也会遇到这个问题。
那github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles
呢
编辑：
如果你安装 ignore-style 模块然后 运行:
babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive
我确定它会起作用，请记住，您可能需要更改路径 node_modules/ignore-styles 我假设您的 node_modules 位于项目的根目录中。
所以我在尝试使用 webpack-loader 前缀时遇到了类似的问题，但由于不在 webpack 的上下文中而失败了。
prunk 比 rewire 等更好，因为它涵盖了所有文件，能够进行路径匹配和替换。
var prunk = require('prunk');
prunk.alias(/^(your loader prefix)/, '');
然后我修改了需要扩展处理以替换正在导入的内容。
require.extensions['.scss'] = function (module, filename) {
module.exports = 'whatever you want';
};
（正是 style-loader 所做的，但 style-loader 会自行清理！另请注意，style loader 命名错误，可以处理许多扩展））
我在我的测试运行器的顶部添加了这个并且没有未找到的模块！
注意 我实际上走得更远，通过使用 fs 读取文件并将其传递给加载器来单独使用原始加载器，但这可能是over kill 并且应该首先使用 webpack 来使用唯一的加载程序来转换测试！
我在测试使用 webpack 导入 .scss 的 UI 组件时遇到问题。我正在直接测试组件代码，而不是导出的 webpack 包。
在我的 SUT 中
我有一些导入 scss 的代码：
import '!style!css!sass!postcss-loader!../style.scss'
当我 运行 测试时，此代码导致错误：
Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
便宜的解决方法
我一直在解决这个问题：
try {
require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }
但这闻起来很脏，我宁愿在我的 SUT 中没有这段代码。
运行 测试
我不知道如何在使用 babel-node 和 babel-istanbul[=43 时找到的解决方案中工作=] 而不是直接摩卡咖啡。这是我目前 运行 测试的方式：
$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive
我找到的所有答案都是直接针对 mocha 的，但我不是 运行宁测试：
$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive
?
我如何在编译器或安装文件中工作以告诉 mocha 忽略 .scss 文件。我相信 .svg 文件接下来也会遇到这个问题。
那github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles
呢编辑： 如果你安装 ignore-style 模块然后 运行:
babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive
我确定它会起作用，请记住，您可能需要更改路径 node_modules/ignore-styles 我假设您的 node_modules 位于项目的根目录中。
所以我在尝试使用 webpack-loader 前缀时遇到了类似的问题，但由于不在 webpack 的上下文中而失败了。
prunk 比 rewire 等更好，因为它涵盖了所有文件，能够进行路径匹配和替换。
var prunk = require('prunk');
prunk.alias(/^(your loader prefix)/, '');
然后我修改了需要扩展处理以替换正在导入的内容。
require.extensions['.scss'] = function (module, filename) {
module.exports = 'whatever you want';
};
（正是 style-loader 所做的，但 style-loader 会自行清理！另请注意，style loader 命名错误，可以处理许多扩展））
我在我的测试运行器的顶部添加了这个并且没有未找到的模块！
注意 我实际上走得更远，通过使用 fs 读取文件并将其传递给加载器来单独使用原始加载器，但这可能是over kill 并且应该首先使用 webpack 来使用唯一的加载程序来转换测试！