使用 babel 和 webpack 的 Mocha 测试失败

Question

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

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

并且我使用 webpack 构建，userImage 导致文件路径的字符串，因为我正在使用图像文件加载器（要求我不要嵌入图像）但是当我尝试运行我的摩卡咖啡测试使用：

./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 要求系统，以便让它理解 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 + '";');

}

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 的 Mocha 测试失败

Mocha test failing using babel and webpack

mocha.js

webpack

babeljs