4

現在、React + MaterialUi アプリケーションの単体テストを作成しています。

私のアプリケーションにはダイアログがあります。ダイアログでどのボタンが押されたかに応じて確認したい：

<FlatButton
  label="Cancel"
  secondary={true}
  onTouchTap={this._cancelDialog.bind(this)} 
 />
 <FlatButton
   label="Submit"
   primary={true}
   onTouchTap={this._confirmDialog.bind(this)} 
 />

それに応じて内部状態が変化すること。

TestUtils.scryRenderedComponentsWithType(FlatButton)
残念ながら、またはなどを使用してダイアログの内容を把握できません
scryRenderedComponentsWithTag("button")
。

そのフローをテストする方法についてのアイデアはありますか?

更新 1

したがって、TestUtils.scryRenderedComponentsWithType(Dialog) を呼び出して、Dialog インスタンスを取得できます。しかし、ダイアログの内容を取得できません。DOM に関しては、コンテンツはビュー自体の内部ではレンダリングされません。ドキュメント レベル (div) で新しく作成されたノードにレンダリングされます。だから私はこれを試しました：

let cancelButton = window.document.getElementsByTagName("button")[0];
Simulate.click(cancelButton);

上記の場合の cancelButton は正しい DOM 要素です。ただし、Simulate.click はコンポーネントのクリック機能をトリガーしません。

よろしくジョナス

4

5 に答える 5

0

avocadojesus によるソリューションは優れています。しかし、私は1つの追加があります。この解決策を適用しようとしてエラーが発生した場合:

エラー: '警告: 失敗したコンテキスト タイプ: コンテキストmuiThemeは で必須としてマークされてDialogInlineいますが、その値はundefinedです。

次のようにコードを変更する必要があります。

var component = TestUtils.renderIntoDocument(
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <UserInteractions.signupDialog show={true}/>
  </MuiThemeProvider>
);

var dialogComponent = TestUtils.findRenderedComponentWithType(component, UserInteractions.signupDialog);

var dialog = TestUtils.renderIntoDocument(
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    {dialogComponent.refs.dialog.renderLayer()}
  </MuiThemeProvider>
);

var node = React.findDOMNode(dialog);
于 2017-07-21T08:53:46.100 に答える