chair-react-element

Build Status

Dependency Status devDependency Status

動機

このライブラリはReactスタイルのVDOMのinclude言語チェーンを使用してチェイニングの動作と入れ子になったアサーションを提供します。アサーションはレンダリングされていない（またはシャローレンダリングされている）要素に対して行われ、DOM（偽物でも本物でも）に依存しない、より軽量なテストになります。

ダックタイピングを使用することで、プラグインはReactElementまたはReactElementと同じプロパティを持つ任意のオブジェクトを受け入れることができます

  • 文字列typeプロパティ
  • オブジェクトのpropsプロパティ、またはpropsプロパティがまったくありません

代替案

Reactオブジェクトに対するアサーションを支援することを目的とした他のチャイプラグインがいくつかあります。このライブラリは、以下の点で代替案とは異なります

  • Chai React Assertions - チェイニングの動作を提供せず、言語はあまり流暢ではありません
  • Chai React - レンダリングされたReactコンポーネントで使用することを目的としています。

使用方法

expect(<div>hello</div>).to.have.text('hello');
expect(<div></div>).to.have.elementOfType('div')
expect(<div data-foo="bar"></div>).to.have.prop('data-foo', 'bar');

expect(<div><div data-foo="bar"></div></div>).to.include.prop('data-foo', 'bar');

expect(<div><span>hello</span></div>).to.include.elementOfType('span').with.text('hello');

このチェーンはノンイーガで動作します。つまり、最初に検出された要素と照合しないということです。つまり、このアサーションは保持されます

expect(<div><span></span><span>hello</span></div>).to.include.elementOfType('span').with.text('hello');

セットアップ

$ npm install chai-react-element

注意：現在、React 0.13.xのみがサポートされています。React 0.14.xへの移行作業は、近い将来に開始されます。

import chai, {expect} from 'chai';
import matcher from 'chai-react-element';
chai.use(matcher);

プラグインはES6モジュールとしてエクスポートされます。ES5を使用している場合は、次を使用してください

chai.use(require('chai-react-element').default);

注意事項

チェイナブルの動作は、.elementOfTypeアサーションに対してのみサポートされています。つまり、.propと.textアサーションはアサーションチェーンの最後にのみ使用でき、次のスタイルはサポートされていません

expect(<div data-foo="bar"><span></span></div>).to.have.prop('data-foo', 'bar').with.an.elementOfType('span')

ネガティブなアサーションは、入れ子になったアサーションに対して予期しない動作をする可能性があります。たとえば、次の例は最初のspan要素が見つかったときに失敗しますが、2つ目の要素でのみ失敗するはずです。

expect(<div><span></span><span data-foo="bar"></span></div>).to.not.include.elementOfType('span').with.prop('data-foo');

コントリビューティング

セットアップ

このプロジェクトはビルドとテストにGulpを使用し、webpack-dev-serverを使用してブラウザ内で実行およびデバッグします。プロジェクトをインストールするには、npm installを実行するだけです。

開発環境を開始するには、npm start、またはGulpがグローバルにインストールされている場合はgulp devを実行します。これにより、Mochaを使用したテストが実行され、さらにwebpack-dev-serverがポート8080で起動されます。テストを実行するには、npm test（またはgulp test）を使用します。

課題

発生した問題については、プロジェクトのGitHubリポジトリで問題を開いてください。問題を問題で議論する前に、プルリクエストを作成しないでください。

プルリクエスト

テスト駆動開発を使用してサブミッションを開発してみてください。少なくともあなたの変更がテストによって適切にカバーされていること、そしてあなたのコードがきれいであることを確認してください。

ロードマップ

  • React 0.14.xをサポート
  • 入れ子になったネガティブなアサーションをサポート（上記を参照）