私の小さなテストプロジェクトには簡単なSearchBarコンポーネントがあります。 このSearchBarは、主にテキスト入力とボタンで構成されています。 ボタンクリックは、入力フィールドのテキストを含むコールバックを実行します。反応と嫌いを使ってテストテキストを入力
私Searchbar.render方法は次のようになります。
it("should adjust keywords and trigger onSearch correctly",() => {
const handleSearch = jest.fn();
const searchBar = ReactTestUtils.renderIntoDocument(
<Searchbar onSearch={handleSearch}/>
);
expect(searchBar.state.keywords).toBe("");
const button = ReactDOM.findDOMNode(searchBar.refs.searchButton);
const input = ReactDOM.findDOMNode(searchBar.refs.searchInput);
ReactTestUtils.Simulate.change(input, {target: {value: "test"}});
ReactTestUtils.Simulate.click(button);
expect(handleSearch).toHaveBeenCalledWith("test");
});
今callMe
に保存されている。このテスト作品にコールバック関数が取得者:
return (
<FormGroup controlId="keywords">
<InputGroup>
<FormControl type="text"
placeholder="Keywords…"
value={this.state.keywords}
onChange={this.updateKeywords} />
<InputGroup.Button
onClick={() => {this.props.onSearch(this.state.keywords);}}
ref="searchInput">
<Button ref="searchButton">
<Glyphicon glyph="search"/>
</Button>
</InputGroup.Button>
</InputGroup>
</FormGroup>
);
は私が冗談を使用して、それをtestを書きました期待通りに呼ばれる。 SearchBar
も私のアプリケーションで動作するので、SearchBar
コードが正しいと思います。コメントAndreas Köberleで
expect(jest.fn()).toHaveBeenCalledWith(expected)
Expected mock function to have been called with:
["test"]
But it was called with:
[""]
が失敗テストの理由でなければなりませんupdateKeywords
メソッドが呼び出されないように思われる問題を私に指摘:私は私のテストを実行するためにnpm test
を使用する場合でも、テストは失敗します。残念ながら私はこのメソッドがテストで呼び出されない理由を理解できません。
ポインタありがとうございます! 悲しいことに、これまでのところうまくいきません。 私は[Searchbar.test.js](https://github.com/runjak/spreadshirtRemoteTask/blob/master/src/Searchbar.test.js#L27)を調整しましたが、 'npm test'はまだ文句を言います。これを再現しやすくするために、私の 'master 'ブランチを調整しました。 –
スパイを正しく使用する方法を示すために私の答えを更新しました。 –
ニース、私は 'toHaveBeenCalledWith'メソッドを知らなかった。これはよりエレガントですが、私のテストはまだ失敗します。私はそれに応じて質問とマスターブランチを更新しました。 –