-Test mit Mokka und Enzym eine Reaktion Komponente, die CSS-Module Reagieren verwendet

Question

Ich versuche, die generierte Klasse einer Komponente zu testen, die React CSS modules

Hier verwendet, ist eine Probe Foo Komponente:

import React from 'react'; 
import CSSModules from 'react-css-modules'; 
import styles from './Foo.css'; 

const Foo = ({ className }) => <div styleName={className} />; 

Foo.propTypes = { 
    className: React.PropTypes.string.isRequired, 
}; 

export default CSSModules(Foo, styles, { allowMultiple: true, errorWhenNotFound: false }); 

-Test Code (Foo.spec.jsx):

import React from 'react'; 
import { expect } from 'chai'; 
import { shallow } from 'enzyme'; 
import Foo from '../../../app/components/Foo'; 

describe('<Foo/>',() => { 
    it.only('should return a className prop as class value',() => { 
     const wrapper = shallow(<Foo className="bar" />); 
     console.log('DEBUG----->', wrapper.html()); 
    }); 
}); 

Foo.css Code:

.bar { 
    background-color: red; 
} 

Und hier ist der Test HTML-Ausgabe:

DEBUG-----> <div></div> 

Wie Sie es erzeugt ein leeres div ohne Klasse sehen kann, also keine Behauptung funktioniert.

Auch ich möchte darauf hinweisen, dass dies nur im Test fehlschlägt, generiert die Komponente die erwartete HTML-Klasse in der Web-App generiert HTML-Code.

Irgendeine Idee, wie man das repariert?

UPDATE

Wie im Kommentar von fabio schlug ich habe versucht, die Möglichkeit zu entfernen errorWhenNotFound: false

Nun wird die Test gibt die folgende Fehlermeldung:

Error: "bar" CSS module is undefined.

Was ich don verstehe nicht, da die Balkenklasse in der Datei Foo.css definiert ist.

Auch habe ich festgestellt, dass, wenn ich debuggen die Stile in der Foo Komponente:

import styles from './Foo.css'; 
console.log('STYLES', styles); 

Es gibt eine leere Ausgabe:

STYLES {}

Obwohl beide in diesem vereinfachten Beispiel und in der Voll flügge Code Die Komponente generiert die erwartete HTML-Klasse in der Web-App generiert HTML-Code mit den entsprechenden Stilen funktioniert gut.

Answer 1

Wie das OP in den Kommentaren erwähnt, ist das Problem, dass Mocha mit der Option "ignore-styles" ausgeführt wurde. Das, zusammen mit der Option errorWhenNotFound: false maskierte das eigentliche Problem, das das von dem Modul exportierte Stilobjekt tatsächlich leer ist, das Modul von Mocha ignoriert wird.

Ohne diese Option müssen Sie Mocha trotzdem anweisen, das CSS-Modul zu importieren und korrekt zu analysieren. Der Deklarationsfehler /var/www/web/app/components/Icon.css: Leading decorators must be attached to a class ist wahrscheinlich auf die Tatsache zurückzuführen, dass Mocha versucht, den Inhalt der CSS-Datei als js zu interpretieren, was offensichtlich fehlschlägt.

Um richtig Dinge einzurichten, müssen Sie einen Blick hier: https://gist.github.com/mmrko/288d159a55adf1916f71

Die Idee, so etwas zu tun ist:

var hook = require('css-modules-require-hook') 
var sass = require('node-sass') 

hook({ 
    extensions: [ '.scss', '.css' ], 
    generateScopedName: '[local]___[hash:base64:5]', 
    preprocessCss: (data, file) => sass.renderSync({ file }).css 
}) 

in Ihrem Mocha Eintrag Datei (bevor Sie etwas anderes tun), um dir zu sagen, wie man mit den css/sass-Dateien umgeht.

können Sie legen den Inhalt dieser Kern in einem Test/setup.js Datei zum Beispiel, und dann Mokka laufen auf diese Weise:

mocha --compilers js:babel-register --require ./test/setup.js \"./test/**/*.spec.js\" 

Auf diese Weise Ihre setup.js Initialisierung Code ausgeführt werden soll vor den Tests.

Answer 2

Danke für die Antwort! Wenn Sie sich nicht mit SASS besorgt können Sie auch dies nur tun ...

import hook from 'css-modules-require-hook' 

hook({ 
    generateScopedName: '[local]___[hash:base64:5]', 
})