6

React CSS モジュールを使用するコンポーネントの生成されたクラスをテストしようとしています

サンプル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 クラスを生成します。

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

アップデート

ファビオのコメントで示唆されているように、オプションを削除しようとしましたerrorWhenNotFound: false

テストで次のエラー メッセージが表示されるようになりました。

エラー: "bar" CSS モジュールが定義されていません。

bar クラスがFoo.cssファイルで定義されているため、わかりません。

Fooまた、コンポーネントのスタイルをデバッグすると、次のことがわかりました。

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

空の出力を返します。

スタイル {}

この単純化された例と本格的なコードの両方で、コンポーネントは、対応するスタイルが正常に機能する HTML コードを生成した Web アプリで期待される html クラスを生成します。

4

2 に答える 2

11

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

このオプションがオンになっていない場合でも、CSS モジュールをインポートして正しく解析するように Mocha に指示する必要があります。宣言エラーは、/var/www/web/app/components/Icon.css: Leading decorators must be attached to a classMocha が 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
})

Mocha エントリ ファイルで (他の操作を行う前に)、css/sass ファイルの処理方法を指定します。

たとえば、その要点の内容を test/setup.js ファイル内に配置し、次の方法で Mocha を実行できます。

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

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

于 2016-10-11T10:23:49.397 に答える