Test di Mocha falliti a causa di css nel pacchetto web

Question

Sono nuovo a Mocha e sto cercando di usarlo per testare un semplice componente React. Il test passerebbe se il componente reagire non ha stile CSS, ma getta un errore di sintassi se il tag all'interno del componente Reagire contiene alcun className:

Testing.react.js

import React from 'react'; 

export default class Testing extends React.Component { 
    render() { 
    return (
     <section> 
     <form> 
      <input type="text" /> 
     </form> 
     </section> 
    ); 
    } 
} 

testing.jsx

import { 
    React, 
    sinon, 
    assert, 
    expect, 
    TestUtils 
} from '../../test_helper'; 

import TestingSample from '../../../app/components/Testing.react.js'; 

describe('TestingSample component', function(){ 
    before('render and locate element', function(){ 
     var renderedComponent = TestUtils.renderIntoDocument(
      <TestingSample /> 
     ); 

     var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
      renderedComponent, 'input' 
     ); 

     this.inputElement = inputComponent.getDOMNode(); 
    }); 

    it('<input> should be of type "text"', function() { 
     assert(this.inputElement.getAttribute('type') === 'text'); 
    }); 
}) 

il test sarebbe passato:

> mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx 


    TestSample component 
    ✓ <input> should be of type "text" 


    1 passing (44ms) 

dopo ho aggiunto il className all'interno del tag input un errore si presenta: risultato

import React from 'react'; 
import testingStyle from '../../scss/components/landing/testing.scss'; 

export default class Testing extends React.Component { 
    render() { 
    return (
     <section> 
     <form> 
      <input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />  
     </form> 
     </section> 
    ); 
    } 
} 

prova:

SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0) 
> 1 | .color { 
    |^
    2 | color: red; 
    3 | } 

Ho cercato online, ma senza fortuna finora. Mi sto perdendo qualcosa? Per favore aiutami o indicami la giusta direzione sarebbe molto apprezzato. Attualmente sto usando:
Nodo Express Server
Reagire
React-router
Webpack
Babel
Mocha
Chai
Sinon
Sinon-Chai

Answer 1

C'è un gancio babel/register stile di ignorare le importazioni di stile:

https://www.npmjs.com/package/ignore-styles

installarlo:

npm install --save-dev ignore-styles

test eseguito senza stili:

mocha --require ignore-styles

Answer 2

Dal momento che si sta utilizzando webpack , utilizzare null-loader per caricare null quando il webpack incontra un file CSS/LESS/SASS/etc richiesto nei componenti. Installare tramite NPM e quindi aggiornare il config webpack per includere il caricatore:

{ 
    test: /(\.css|\.less|.\scss)$/, 
    loader: 'null-loader' 
} 

Ovviamente questo ti impedirà di carico CSS nell'applicazione reale, in modo che si vorrà avere una configurazione webpack separato per il vostro pacco test che usa questo caricatore

Answer 3

è possibile utilizzare un compilatori css correre moka, i js compilatore come segue:

css-DNT-compilatore.js

function donothing() { 
    return null; 
} 

require.extensions['.css'] = donothing; 
require.extensions['.less'] = donothing; 
require.extensions['.scss'] = donothing; 
// ..etc 

ed eseguire il comando moka in questo modo:

mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive 

Answer 4

My same answer as here, 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. Puoi aggiungere tutte le estensioni che desideri con require.extensions.

Answer 5

Nessuna di queste soluzioni ha funzionato per me, poiché sto utilizzando mocha-webpack e non accetta l'opzione "--compiler". Ho implementato il pacchetto ignore-styles, come descritto nella risposta più popolare, ma sembrava inerte, senza alcuna differenza nel mio rapporto sulla copertura di Istanbul (file .less ancora in fase di test).

Il problema è il .less loader che stavo usando nel mio file webpack.config.test.js. Basta scambiare meno caricatore per null-loader risolto il mio problema.

module: { 
    rules: [ 
     { 
      test: /\.less$/, 
      use: ['null-loader'] 
     } 
    ] 
} 

Per me, questo è di gran lunga la soluzione più semplice, e gli obiettivi la mia configurazione di test direttamente, piuttosto che dover modificare/aggiungere agli script package.json, o peggio, aggiungere nuovi file .js.

Answer 6

Un modo semplice consiste nell'importare "ignore-styles"; nelle classi di test ..

Answer 7

Per coloro che cercano come gestire questo in jest - basta aggiungere un gestore per i file di stile:

// package.json 
{ 
    "jest": { 
    "moduleNameMapper": { 
     "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js" 
    } 
    } 
} 

// __mocks__/styleMock.js 
module.exports = {}; 

Più here.