web-dev-qa-db-fra.com

Les tests Mocha ont échoué en raison de CSS dans Webpack

Je suis nouveau dans Mocha et j'essaie de l'utiliser pour tester un simple composant React. Le test réussirait si le composant react n'a pas de style CSS mais génère une erreur de syntaxe si la balise dans le composant React contient n'importe quel nom de classe:

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');
    });
})

Le test réussirait:

> 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)

après avoir ajouté le 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 (
      <section>
        <form>
          <input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />     
        </form>
      </section>
    );
  }
}

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. Suis-je en train de manquer quelque chose? S'il vous plaît, aidez-moi ou dirigez-moi dans la bonne direction. J'utilise actuellement:
Node Express Server
Réagir
React-router
Webpack
Babel
Moka
Chai
Sinon
Sinon-Chai

unit-testingreactjsmochawebpackwebpack-dev-server
70
Yi Ren

Il y a un babel/register crochet de style pour ignorer les importations de style:

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

Installez-le:

npm install --save-dev ignore-styles

Exécutez des tests sans styles:

mocha --require ignore-styles

144
rzueger

vous pouvez utiliser un compilateur css exécuter mocha, le compilateur js comme suit:

css-dnt-compiler.js

function donothing() {
  return null;
}

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

et exécutez la commande mocha comme ceci:

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

Ma même réponse qu'ici , c'est ce que j'ai utilisé pour travailler sur Babel 6

package.json 

"scripts": {
  "test": "mocha --compilers 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 à côté de vos composants. Vous pouvez ajouter autant d'extensions que vous le souhaitez avec require.extensions.

8
mummybot

Puisque vous utilisez webpack, utilisez null-loader pour charger null lorsque webpack rencontre un fichier CSS/LESS/SASS/etc requis 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 CSS dans votre application réelle, vous voudrez donc avoir une configuration Webpack distincte pour votre bundle de test qui utilise ce chargeur.

4
Jim Skerritt

Pour ceux qui cherchent à gérer cela dans jest - il vous suffit d'ajouter un gestionnaire pour les fichiers de style:

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

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

Plus ici .

1
Piotr Jaworski

Aucune de ces solutions n'a fonctionné pour moi, car j'utilise mocha-webpack, et il n'accepte pas le commutateur "--compilers". J'ai implémenté le package ignore-styles, comme décrit dans la réponse la plus populaire, mais il semblait inerte, sans aucune différence dans mon rapport de couverture d'Istanbul (.less fichiers encore en cours de test).

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

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

Pour moi, c'est de loin la solution la plus simple, et cible directement ma configuration de test, plutôt que d'avoir à modifier/ajouter aux scripts package.json, ou pire, à ajouter de nouveaux fichiers .js.

1
Artif3x

Une façon simple consiste à importer des "styles ignorés"; dans vos classes de test ..

0
Neelendu Shekhar

Bien que très ancienne, cette question est toujours d'actualité, alors laissez-moi vous proposer une autre solution.

Utilisez pirates , un package pour ajouter des hooks à require() - si vous utilisez Babel, vous l'avez déjà.

Exemple de code:

// .test-init.js
const { addHook } = require('pirates');

const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];

addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });

De cette façon, vous pouvez appeler mocha comme ceci: mocha --require .test-init.js [whatever other parameters you use]

C'est simple, élégant et contrairement à ignorer les styles cela ne signifie pas que vous ignorez uniquement les styles. En outre, cela est facilement extensible si vous devez appliquer un peu plus de ruse à vos tests, comme se moquer de modules entiers.

0
AlQafir

Le code ci-dessous fonctionne sans aucune dépendance. Ajoutez-le simplement en haut des tests.

var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    if (arguments[0] && arguments[0].endsWith(".css"))
        return;
    return originalRequire.apply(this, arguments);
};
0
bert