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

【问题标题】：Require/import svg during mocha tests在 mocha 测试期间需要/导入 svg
【发布时间】：2016-05-16 17:14:24
【问题描述】：

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

在运行测试时，我一直在尝试避免使用 webpack，以避免将 mocha 版本绑定到 webpack 插件。不幸的是，当.svg 导入被命中时，它们找不到。我们也在使用 css 模块，它们允许我使用 css-modules-require-hook 来解决 css 文件的导入问题。

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

【问题讨论】：

标签： javascript webpack mocha.js

【解决方案1】：

我看到通过使用require.extensions（在节点中这是deprecated，但永远不应该消失）强制导入这些类型的资产导致无操作解决了这个问题。使用 --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 函数，而不是尝试加载实际文件。

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

【讨论】：

这是最好的答案
同意。我也喜欢干净的 js/jsx 扩展语法。

【解决方案2】：

是的，我只是想办法为mocha here 模拟.svg 模块。

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

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

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

示例如下：

import requireHacker from 'require-hacker';

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

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

【讨论】：