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

或创建一个文件＆＃39; test / mocha.opts＆＃39;包含（更好地满足您的需求）：

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

}

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

我希望它有所帮助。

摩卡测试使用babel和webpack失败

2 个答案: