モカテスト中にsvgが必要/インポートされます

Question

webpackでプロジェクトをビルドしています。これにより、.svgファイルをインポートしてReactコンポーネントを作成することができます。

テストを実行しているとき、私はwebpackプラグインにmochaバージョンを関連付けることを避けるためにwebpackの使用を避けようとしています。残念ながら、.svgのインポートがヒットした場合、それらは見つからない。また、CSSモジュールを使用していて、css-modules-require-hookを使用してCSSファイルのインポートを回避することができました。

SVGで同じことを達成するための手法はありますか？

Answer 1

はい、私は.svgモジュールをmochahereのための模擬する方法を見つけるだけです。

モカはbabel-register：.jsのような普遍的なjavascriptのインポートを処理するためにrequire hooksを使用できます。

require-hackerを使用すると、モジュールの拡張機能にフックを追加できます。

react-svg-loaderのような他のコンポーネントローダーのNull応答コンポーネントを使用して、.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

私は、これはノーオペレーションをもたらすために、資産のこれらのタイプをインポート強制的に（ノードでは、これはdeprecatedですが、離れて行くべきではありません）require.extensionsを使用することで解決を見ました。

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; 

--requireフラグでmochaを起動すると、私たちはので、このようなモカを開始する我々のテストのためのランタイム環境を設定できます実際のファイルを読み込もうとする代わりにnoopが機能します。

私のコードはes6import構文を使用しているが、私はbabelが動作するように、この技術を可能にカバーの下にrequireにそれを変換していると仮定しています。