使用 babel 和 webpack 的 Mocha 测试失败答案

【问题标题】：Mocha test failing using babel and webpack使用 babel 和 webpack 的 Mocha 测试失败
【发布时间】：2016-02-21 19:43:16
【问题描述】：

所以我在这里使用 webpack、babel 和 mocha。当我有这样的代码时：

import userImage from '../../images/user.png';

并且我使用 webpack 构建，userImage 会生成一个指向文件路径的字符串，因为我使用的是图像文件加载器（要求我不要嵌入图像）但是当我尝试使用以下方式运行我的 mocha 测试时：

./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha

我收到语法错误：

SyntaxError: /repositories/react-seed/web/app/images/user.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 |

删除伊斯坦布尔时，我也收到此错误。所以它似乎正在尝试加载实际的图像文件，但是可以将其解析为 JavaScript，因为它不是。

有人知道解决这个问题的方法吗？

【问题讨论】：

Mocha 在 Node 中运行，您正在导入 Node 不知道如何处理的文件类型。你期望userImage 在这种情况下是什么？

标签： mocha.js webpack babeljs

【解决方案1】：

您可以使用 --compilers 选项，该选项允许您自定义 nodejs 要求系统，以使其理解 png 文件。所以：

mocha --compilers png:./mochacfg.js

或者创建一个文件“test/mocha.opts”，其中包含（更适合您的需要）：

--compilers png:./mochacfg.js

使用 ./mochacfg.js：

require.extensions['.png'] = function(){ return null; }

这会忽略 png 文件（如果你对它们不做任何特殊处理应该没问题）。

如果你想对图像数据做点什么：

var fs = require('fs');
require.extensions['.png'] = function(module, filepath) {
  var src = fs.readFileSync(filepath).toString ('base64');
  return module._compile('module.exports = "data:image/png;base64,' + src + '";');

}

【讨论】：

【解决方案2】：

回答这个问题已经很晚了，但只是为了分享知识，我正在回答另一种方法。

创建一个 test-config.js 文件并在运行 mocha 测试用例时使用它。

var jsdom = require('jsdom').jsdom;
process.env.NODE_ENV = 'test';

// -------------------------------
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.

['.css', '.scss', '.png', '.jpg'].forEach(ext => {
  require.extensions[ext] = () => null;
});

在package.json中使用这个测试命令来运行测试用例

"test": "mocha ./test/test-setup.js './test/**/*.spec.js' --compilers js:babel-core/register",

我希望它对某人有所帮助。

【讨论】：

是 test-setup.js 应该是 test-config.js 吗？
require.extensions 已弃用。