Require/import 摩卡测试期间的 svg

Question

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

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

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

Answer 1

是的，我只是找到了一种方法来为 mocha here 模拟 .svg 模块。

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

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

您可以为其他组件加载器使用空反应组件模拟，例如 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}`);

Answer 2

我看到通过使用 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;

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

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

Require/import 摩卡测试期间的 svg

Require/import svg during mocha tests

javascript

mocha.js

webpack