mocha.js - 使用Babel和Webpack的Mocha测试失败

Question

所以我在这里使用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 | 

删除 Istanbul 尔时，我也会收到此错误。因此，似乎正在尝试加载实际的图像文件，但是可以将其解析为JavaScript，因为事实并非如此。

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

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 + '";');

}