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

Question

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

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

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

Answer 1

我看到这通过使用require.extensions(在节点中已被弃用,但永远不会消失)来强制导入这些类型的资产以导致无操作.从标志开始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模块mocha here。

Mocha 可以require hooks用来处理通用的 javascript 导入，例如babel-registerfor .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}`);