Richiedi/importa svg durante i test della moka

Question

Ho un progetto in fase di costruzione con webpack. Questo mi consente di importare i file .svg per creare componenti React.

Durante l'esecuzione di test, ho tentato di evitare l'uso di webpack per evitare di legare la versione mocha a un plug-in Webpack. Sfortunatamente, quando vengono colpite le importazioni .svg, non riescono a trovarle. Stiamo anche utilizzando i moduli css e mi hanno permesso di usare lo css-modules-require-hook per aggirare l'importazione dei file css.

Esiste una tecnica che potrei usare per realizzare la stessa cosa con gli SVG?

Answer 1

Sì, ho appena trovato un modo per simulare il modulo .svg per mochahere.

Mocha può utilizzare require hooks per gestire l'importazione javascript universale, ad esempio babel-register per .js.

È possibile utilizzare require-hacker per aggiungere ganci alle estensioni dei moduli.

È possibile utilizzare un componente a reazione nulla simulato per altri caricatori di componenti come react-svg-loader per caricare .svg come componente di reazione.

qui è l'esempio:

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

ho visto questo risolto utilizzando require.extensions (nel nodo di questo è deprecated, ma non dovrebbe mai andare via) per forzare l'importazione di questi tipi di attività per portare ad un no-op . Partendo mocha con la bandiera --require ci permette di configurare l'ambiente di runtime per i nostri test in modo da iniziare moka in questo modo:

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 

dove 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; 

In questo modo tutti i tipi di file da rendimento superiore la funzione noop invece di tentare di caricare il file attuale.

Il mio codice sta usando la sintassi es6import ma sto supponendo che babel è la conversione che per require sotto le coperte che consente questa tecnica per lavorare.