Javascript 使用Mocha和Babel进行测试时处理网页包CSS导入

当测试具有网页包CSS导入的

.js

文件（如

import./style.CSS'

）时，Mocha会抛出语法错误（因为它尝试将CSS文件作为js导入和解析）。有一个解决方案可以解决这个问题，但它只解决您还没有使用带有Mocha的编译器的情况。我用的是巴别塔5。我尝试了以下方法，但Mocha似乎不支持传递多个编译器：

// npm test script

mocha ./src/**/*Test.js --compilers css:./scripts/mocha-webpack-compiler.js js:babel/register

// scripts/mocha-webpack-compiler.js

function noop() {
  return null;
}

require.extensions['.css'] = noop;

有没有一种方法可以拥有多个Mocha编译器，或者有更好的方法告诉Mocha不要尝试解析网页包CSS导入

---

编辑：

我喜欢下面@Giles B提出的解决方案；这正是我所需要的。然而，由于我仍然在巴别塔5上，我需要一些调整，如下所示：

摩卡咖啡 scripts/babelhook.js scripts/mocha-webpack-compiler.js 摩卡手稿

---

我使用的是

babel

和

babel core

，这两个版本都是

5.8.23

，我遇到了同样的问题，并且刚刚开始工作，所以在我的mocha.opts文件中，我添加了以下

require

调用：

--require test/babelhook
--require test/css-null-compiler

在

babelhook.js

中，我有一个require语句来加载巴贝尔：

// This file is required in mocha.opts
// The only purpose of this file is to ensure
// the babel transpiler is activated prior to any
// test code, and using the same babel options

require("babel-register")();

然后从链接中，我将设置css null compiler.js，如下所示：

// Prevent Mocha from compiling class
function noop() {
  return null;
}

require.extensions['.css'] = noop;
require.extensions['.scss'] = noop;

---

希望这能有所帮助。

根据@Giles的上述回答，这就是我过去在巴别塔6上的工作

package.json

"scripts": {
  "test": "mocha --compilers js:babel-core/register 
          --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'",

tools/testHelper.js

// Prevent mocha from interpreting CSS @import files
function noop() {
  return null;
}

require.extensions['.css'] = noop;

---

这使您能够将测试放在组件旁边的src文件夹中。

谢谢-这正是我所需要的。但是，它对我还不起作用：我得到了一个“SyntaxError:Unexpected token import”；您正在使用ES6模块吗？顺便说一句，我仍然在巴别塔5（巴别塔6有太多的问题，目前）。相关的SO问题：我尝试使用require（'babel/register'）；相反，我得到了同样的错误。我想我可能已经解决了它-我没有意识到mocha.opts需要在/test/中才能被识别（我在项目的根目录中有它）。我会做更多的测试，然后回来；如果它有效，我会将赏金点数奖励给你Giles。现在我再次收到

SyntaxError:Unexpected token import

错误，但原因不同；似乎

babel/register

无法处理

node\u模块/

包中的导入语句。奇怪的是，因为我的所有测试都使用direct CLI中的

--compilers

选项。我不知道现在该怎么办。我可以在Webpack文档中使用Webpack--target node选项，但我更希望我的测试能够在不依赖Webpack的情况下进行。这是一个无关的问题——它符合我的要求，因此我将奖励Giles。谢谢贾尔斯！

// This file is required in mocha.opts
// The only purpose of this file is to ensure
// the babel transpiler is activated prior to any
// test code, and using the same babel options

require("babel-register")();

// Prevent Mocha from compiling class
function noop() {
  return null;
}

require.extensions['.css'] = noop;
require.extensions['.scss'] = noop;

"scripts": {
  "test": "mocha --compilers js:babel-core/register 
          --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'",

// Prevent mocha from interpreting CSS @import files
function noop() {
  return null;
}

require.extensions['.css'] = noop;