テスト・ユーティリティ
React.addons.TestUtilsは、あなたが選択した(我々はJestを使用)テストフレームワーク内での、
Reactコンポーネントのテストを簡単にしてくれるものです。
シミュレート
Simulate.{eventName}(DOMElement element, object eventData)
オプションのeventDataであるイベントデータで、DOMノード上のイベントの発行をシミュレートします。
これはReactTestUtilsの中で、おそらく最も有用なユーティリティでしょう。
使用例:
var node = React.findDOMNode(this.refs.input);
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
SimulateはReactが認識する各イベント用のメソッドを持ちます。
renderIntoDocument
ReactComponent renderIntoDocument(ReactElement instance)
document内の独立したDOMノード内にコンポーネントを描画します。 この関数はDOMを必要とします。
mockComponent
object mockComponent(function componentClass, string? mockTagName)
ダミーのReactコンポーネントとして使用出来るようにするための便利メソッドを付与するために、
モックされたコンポーネントモジュールをこのメソッドに渡します。
通常の描画の代わりに、このコンポーネントは提供された子を含むシンプルな<div>(もしくはmockTagNameが提供されれば別のタグ)になります。
isElement
boolean isElement(ReactElement element)
もし要素がReactElementであればtrueを返します。
isElementOfType
boolean isElementOfType(ReactElement element, function componentClass)
もしelementがReactのcomponentClassの型を持つReactElementであれば、trueを返します。
isDOMComponent
boolean isDOMComponent(ReactComponent instance)
instanceがDOMコンポーネント(<div>または<span>のような)であれば、trueを返します。
isCompositeComponent
boolean isCompositeComponent(ReactComponent instance)
インスタンスが混合コンポーネントであれば、trueを返します。
isCompositeComponentWithType
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
instanceがReactのcomponentClassの型を持つ混合コンポーネント(React.createClass()で作成された)であれば、
trueを返します。
findAllInRenderedTree
array findAllInRenderedTree(ReactComponent tree, function test)
ツリー内の全てのコンポーネントを巡り、test(component)がtrueの全てのコンポーネントを集めます。
それ自身では便利とは言えず、他のテスト・ユーティリティと組み合わせて使用するのに向いています。
scryRenderedDOMComponentsWithClass
array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
描画されたツリー内のclassNameとマッチするクラス名を持つ全てのDOMコンポーネントのインスタンスを見つけだします。
findRenderedDOMComponentWithClass
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
結果が1つになることが期待されるscryRenderedDOMComponentsWithClass()のようなもので、
結果が1つ返されるか、またはマッチするものが1つでは無い場合は例外がスローされます。
scryRenderedDOMComponentsWithTag
array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
描画されたツリー内のtagNameにマッチするタグ名のDOMコンポーネントの全てのインスタンスを見つけます。
findRenderedDOMComponentWithTag
ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
結果が1つになることが期待されるscryRenderedDOMComponentsWithTag()のようなもので、
結果が1つ返されるか、またはマッチするものが1つでは無い場合は例外がスローされます。
scryRenderedComponentsWithType
array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
型がcomponentClassと等しいコンポーネントのインスタンスを全て見つけ出します。
findRenderedComponentWithType
ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
scryRenderedComponentsWithType()と同じですが、結果が1つになることが期待され、
その1つの結果を返すか、または結果が1つで無ければ例外がスローされます。
浅いレンダリング(Shallow rendering)
浅いレンダリング(Shallow rendering)は実験的な機能です。
"1階層の深さ"のコンポーネントを描画させることで、子コンポーネントがインスンス化または描画されず、
そのため子コンポーネントの挙動を気にすること無く、renderメソッドが返すものに対してassertを行う事が出来るようになります。
これはDOMを必要としません。
ReactShallowRenderer createRenderer()
テスト内で浅いレンダラー(shallow renderer)を作成するために呼び出します。 あなたがテストをするコンポーネントを描画するための"場所"で、 イベントの応答と自身の更新が可能であると考える事が出来ます。
shallowRenderer.render(ReactElement element)
React.renderによく似ています。
ReactComponent shallowRenderer.getRenderOutput()
renderが呼び出された後に、浅い描画出力が返されます。 この出力に対してassertをすることが可能になります。 例えば、もしコンポーネントのrenderメソッドが次のものを返す場合、
<div>
<span className="heading">Title</span>
<Subcomponent foo="bar" />
</div>
このように、assertする事が出来ます。
result = renderer.getRenderOutput();
expect(result.type).toBe('div');
expect(result.props.children).toEqual([
<span className="heading">Title</span>,
<Subcomponent foo="bar" />
]);
現在の浅い描画のテスト(shallow testing)には幾つかの制限があり、 具体的にはrefsをサポートしないことです。 我々はこの機能を早々にリリースする予定です。 また、Reactのコミュニティのどのように発展させていくべきかというフィードバックに感謝しています。