Les tests de moka ont échoué en raison de css dans webpack

Je suis nouveau sur Mocha et j’essaie de l’utiliser pour tester un composant React simple. Le test passerait si le composant react ne comporte aucun style CSS, mais renvoie une erreur de syntaxe si la balise du composant React contient un nom de classe:

Testing.react.js

import React from 'react'; export default class Testing extends React.Component { render() { return ( 
); } }

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(  ); var inputComponent = TestUtils.findRenderedDOMComponentWithTag( renderedComponent, 'input' ); this.inputElement = inputComponent.getDOMNode(); }); it(' should be of type "text"', function () { assert(this.inputElement.getAtsortingbute('type') === 'text'); }); }) 

Le test passerait:

 > mocha --opts ./test/javascripts/mocha.opts --comstackrs js:babel/register --recursive test/javascripts/**/*.jsx TestSample component ✓  should be of type "text" 1 passing (44ms) 

Après avoir ajouté className à l’intérieur de la balise d’entrée, une erreur apparaît:

 import React from 'react'; import testingStyle from '../../scss/components/landing/testing.scss'; export default class Testing extends React.Component { render() { return ( 
); } }

Résultat du test:

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

J’ai cherché en ligne mais pas de chance jusqu’à présent. Est-ce que je manque quelque chose? S’il vous plaît, aidez-moi ou dirigez-moi vers la bonne direction serait grandement apprécié. J’utilise actuellement:
Node Express Server
Réagir
React-routeur
Webpack
Babel
Moka
Chai
Sinon
Sinon-Chai

Il existe un hook de style babel/register pour ignorer les importations de style:

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

Installez-le:

npm install --save-dev ignore-styles

Exécuter des tests sans styles:

mocha --require ignore-styles

vous pouvez utiliser un compilateur CSS en utilisant mocha, le compilateur js comme suit:

css-dnt-comstackr.js

 function donothing() { return null; } require.extensions['.css'] = donothing; require.extensions['.less'] = donothing; require.extensions['.scss'] = donothing; // ..etc 

et lancez la commande mocha comme ceci:

 mocha --comstackrs js:babel-core/register,css:css-dnt-comstackr.js --recursive 

Ma même réponse que ici , c’est ce que je travaillais sur Babel 6

package.json

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

tools / testHelper.js

 // Prevent mocha from interpreting CSS @import files function noop() { return null; } require.extensions['.css'] = noop; 

Cela vous permet d’avoir vos tests dans votre dossier src avec vos composants. Vous pouvez append autant d’extensions que vous le souhaitez avec require.extensions.

Puisque vous utilisez webpack, utilisez null-loader pour charger null lorsque webpack rencontre un fichier CSS / LESS / SASS / etc requirejs dans vos composants. Installez via npm puis mettez à jour votre configuration webpack pour inclure le chargeur:

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

Évidemment, cela vous empêchera de charger des CSS dans votre application réelle. Vous aurez donc besoin d’une configuration Webpack distincte pour votre bundle de test qui utilise ce chargeur.

Pour ceux qui cherchent comment gérer cela en jest – vous ajoutez simplement un gestionnaire pour les fichiers de style:

 // package.json { "jest": { "moduleNameMapper": { "\\.(css|less|scss|sass)$": "/__mocks__/styleMock.js" } } } // __mocks__/styleMock.js module.exports = {}; 

Plus ici

Aucune de ces solutions n’a fonctionné pour moi, car j’utilise mocha-webpack et n’accepte pas le commutateur “–comstackrs”. J’ai implémenté le paquet ignore-styles, comme décrit dans la réponse la plus populaire, mais cela semblait inerte, sans différence dans mon rapport de couverture d’Istanbul (les fichiers .less étant toujours en cours de test).

Le problème est le chargeur .less que j’utilisais dans mon fichier webpack.config.test.js. Échanger simplement moins-loader pour null-loader a résolu mon problème.

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

Pour moi, c’est la solution la plus simple et cible directement ma configuration de test, plutôt que de devoir modifier / append des scripts package.json, ou pire, append de nouveaux fichiers .js.

Un moyen simple consiste à importer “ignore-styles”; dans vos classes de test ..