在mocha测试期间需要/导入svg

Question

我有一个用webpack构建的项目。 这允许我导入.svg文件来创建React组件。

在运行测试时，我一直试图避免使用webpack来避免将mocha版本绑定到webpack插件。 不幸的是，当.svg导入被攻击时，找不到它们。 我们也使用css模块，他们允许我使用css-modules-require-hook来处理css文件的导入。

有没有一种技术可以用SVG来完成同样的事情？

Answer 1

我看到这通过使用require.extensions解决（在节点中这是不推荐的 ，但永远不会消失）强制导入这些类型的资产导致无操作。 使用--require标志启动mocha可以让我们为测试配置运行时环境，这样就可以像这样启动mocha：

NODE_PATH=./app mocha -w --compilers js:babel-core/register --require ./app/lib/testHelper.js --require ./app/lib/testNullCompiler.js 'app/**/*.spec.@(js|jsx)' --watch-extensions js,jsx

testNullCompiler.js是：

const noop = () => 1;

require.extensions['.css'] = noop;
require.extensions['.scss'] = noop;
require.extensions['.png'] = noop;
require.extensions['.jpg'] = noop;
require.extensions['.jpeg'] = noop;
require.extensions['.gif'] = noop;
require.extensions['.svg'] = noop;

这将导致所有上述类型的文件返回noop函数，而不是尝试加载实际文件。

我的代码使用的是es6 import语法，但我假设babel正在将其转换为require的封面，这使得该技术能够正常工作。

Answer 2

是的，我只是找到一种方式来嘲笑.svg为模块mocha 这里 。

Mocha可以使用require hooks来处理通用的javascript导入，比如babel-register for .js 。

您可以使用require-hacker为模块的扩展添加挂钩。

您可以将null react组件模拟用于其他组件加载器（例如react-svg-loader以将.svg作为反应组件加载。

这是一个例子：

import requireHacker from 'require-hacker';

const fakeComponentString = `
  require('react').createClass({
    render() {
      return null;
    }
  })
`;

// for fake component
requireHacker.hook('svg', path => `module.exports = ${fakeComponentString}`);