摩卡测试使用babel和webpack失败

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 | 

删除伊斯坦布尔时我也会收到此错误.因此,似乎它正在尝试加载实际的图像文件,但是可以将其解析为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 + '";');

}