Question

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

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

我是否可以使用一种技术来完成SVG的相同操作？

Answer 1

我看到这个问题通过使用require.extensions（在节点中为deprecated，但永远不会消失）来强制导入这些类型的资产以导致无操作。使用mocha标志启动--require允许我们为测试配置运行时环境，以便像这样启动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 here的mocha模块的方法。

Mocha可以使用require hooks来处理通用JavaScript导入，例如babel-register .js。

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

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

这是一个例子：

import requireHacker from 'require-hacker';

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

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

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

2 个答案: