使用Babel和Webpack的Mocha测试失败

Question

我正在使用webpack、babel和mocha。当我的代码像这样：

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

我使用webpack进行构建，userImage是一个字符串，表示文件路径，因为我正在使用file loader来处理图片（要求不嵌入图像）。但是当我尝试使用以下命令运行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 | 

当我尝试移除istanbul时，也遇到了这个错误。看起来它正在尝试加载实际的图像文件，但是由于它不是JavaScript，因此无法解析它。有人知道如何解决这个问题吗？

- ryanzec

---

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

Answer 1

您可以使用--compilers选项，该选项允许您自定义nodejs require系统，以便让它理解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 + '";');

}

- alain

Answer 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",

我希望这能对某些人有所帮助。

- WitVault

---

test-setup.js 应该改为 test-config.js 吗？ - Isaac Pak

require.extensions 已经被弃用。 - Ivan Rubinson