Gestire il WebPack Importazioni CSS durante il test con Mocha e Babel

Question

Durante il test dei file .js con importazioni di Webpack CSS come import './style.css', Mocha genera un errore di sintassi (perché tenta di importare e analizzare il file CSS come JS). C'è una soluzione per questo that has already been posted on Stack Overflow, ma si rivolge solo se non stai già utilizzando un compilatore con Mocha. Sto usando Babel 5. Ho provato quanto segue, ma sembra che Mocha non supporta il passaggio più compilatori:

// npm test script 

mocha ./src/**/*Test.js --compilers css:./scripts/mocha-webpack-compiler.js js:babel/register 

// scripts/mocha-webpack-compiler.js 

function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 

C'è un modo per avere più compilatori Mocha, o un modo migliore per raccontare Mocha non tentare di analizzare le importazioni CSS Webpack?

---

EDIT:

mi piace la soluzione proposta da @Giles B sotto; era esattamente ciò di cui avevo bisogno. Tuttavia, dal momento che sono ancora in Babel 5 Avevo bisogno di qualche ritocco come illustrato di seguito:

mocha.opts

--require scripts/support/babelhook 
--require scripts/support/mocha-webpack-compiler 

scripts/babelhook.js

require('babel/register'); 

scripts/moka-webpack- compiler.js

function noop() { 
    return null; 
} 
require.extensions['.css'] = noop; 

sceneggiatura moka

mocha ./src/**/*Test.js 

Questo funziona per me utilizzando babel e babel-core, entrambe la versione 5.8.23.

Answer 1

mi sono imbattuto lo stesso problema e appena ottenuto lavorando, così nel mio file mocha.opts ho aggiunto le seguenti require chiamate:

--require test/babelhook 
--require test/css-null-compiler 

In babelhook.js ho una dichiarazione richiedono per caricare babel:

// This file is required in mocha.opts 
// The only purpose of this file is to ensure 
// the babel transpiler is activated prior to any 
// test code, and using the same babel options 

require("babel-register")(); 

Poi dal link si provided ho configurato css-null-compiler.js come segue:

// Prevent Mocha from compiling class 
function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 
require.extensions['.scss'] = noop; 

Spero che questo aiuti.

Answer 2

in base alla risposta @Giles' sopra, questo è ciò che ho usato per ottenere a lavorare su Babel 6

package.json

"scripts": { 
    "test": "mocha --compilers js:babel-core/register 
      --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'", 

strumenti/testHelper.js

// Prevent mocha from interpreting CSS @import files 
function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 

Ciò consente di avere i test all'interno della cartella src accanto ai componenti.