2016-12-30 11 views
0

私の小さなテストプロジェクトには簡単な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を使用する場合でも、テストは失敗します。残念ながら私はこのメソッドがテストで呼び出されない理由を理解できません。

答えて

1

実際にはDOM要素のイベントをトリガーしないため、イベントデータを自分で渡す必要があります。ドキュメントから:

あなたは、あなたの コンポーネントであなたのためにこれらのいずれか を作成していない反応する(など、...例えばキーコードを、)を使用している任意のイベントプロパティを提供する必要があります。

コンポーネントにコールバックとしてスパイ機能を追加し、イベントをシミュレートした後でこれをテストするのも一般的です。

const handleSearch = jest.fn(); 
const searchBar = ReactTestUtils.renderIntoDocument(
    <Searchbar onSearch={handleSearch}/> 
); 
ReactTestUtils.Simulate.change(input, {target: {value: 'test'}}); 
expect(handleSearch).toHaveBeenCalledWith('test') 
+0

ポインタありがとうございます! 悲しいことに、これまでのところうまくいきません。 私は[Searchbar.test.js](https://github.com/runjak/spreadshirtRemoteTask/blob/master/src/Searchbar.test.js#L27)を調整しましたが、 'npm test'はまだ文句を言います。これを再現しやすくするために、私の 'master 'ブランチを調整しました。 –

+0

スパイを正しく使用する方法を示すために私の答えを更新しました。 –

+0

ニース、私は 'toHaveBeenCalledWith'メソッドを知らなかった。これはよりエレガントですが、私のテストはまだ失敗します。私はそれに応じて質問とマスターブランチを更新しました。 –

関連する問題