テスト

Question

私はここでReact CSS modules

を使用するサンプルにFooコンポーネントであるコンポーネントの生成されたクラスをテストしようとしています：

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

テストコード（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コード：

.bar { 
    background-color: red; 
} 

そしてここでは、テスト用のHTML出力です：

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

あなたはそれがどのクラスなしの空のdivを生成するので、何の表明は働かない見ることができるように。

また、これはテストでのみ失敗し、コンポーネントはWebアプリケーションで生成されたhtmlコードで期待されるhtmlクラスを生成します。

これを修正する方法はありますか？

UPDATE

私はオプションerrorWhenNotFound: false

を削除しようとしたファビオによってコメントで示唆したように今の試験は、次のエラーメッセージが得られます。

Error: "bar" CSS module is undefined.

IドンバークラスはFoo.cssファイルで定義されているため、理解できません。

STYLES {}

この単純な例では、フルで両方ものの：

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

それは空の出力を返します。

はまた、私はFooコンポーネントのスタイルをデバッグする場合は、そのIを見つけました本格的なコードでは、コンポーネントは、Webアプリケーションで生成されたhtmlクラスを生成し、対応するスタイルが正常に動作するhtmlコードを生成します。

Answer 1

コメントに記載されている通り、問題はMochaがignore-stylesオプションで実行されていたことです。これは、errorWhenNotFound: falseオプションと共に実際の問題を隠していました。つまり、モジュールによってエクスポートされたスタイルオブジェクトは実際には空であり、モジュールはMochaによって無視されています。

このオプションをオンにしないと、MochaにCSSモジュールをインポートし、正しく解析するよう指示する必要があります。 /var/www/web/app/components/Icon.css: Leading decorators must be attached to a class宣言のエラーは、おそらくMochaがcssファイルの内容をjsとして解釈しようとしていることが原因です。これは明らかに失敗します。適切なものを設定するには

は、ここを見て： https://gist.github.com/mmrko/288d159a55adf1916f71

アイデアはこのような何かを行うことです：あなたのモカエントリファイル内

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

を（あなたが何かを行う前に）、 css/sassファイルの処理方法を教えてください。

あなたは例えば、テスト/ setup.jsファイル内にその主旨の内容を入れて、その後、このようにモカを実行できます。

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

このように、あなたのsetup.js初期化コードが実行されますテストの前に。

Answer 2

ありがとうございます！ あなたはSASSに関係していない場合にも、単にこれを行うことができます...

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

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