在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}`);