戻り値は `then`プロパティ

Question

を持っていない私持っている私のリアクト構成要素の一つで、次の非同期呼び出し：

onSubmit = (data) => { 
    this.props.startAddPost(data) 
     .then(() => { 
      this.props.history.push('/'); 
     }); 
}; 

ここでの目標は、インデックスページにユーザーをリダイレクトすることであるのみポストがReduxで永続化されると（startAddPostは、Axiosを使用して外部APIにデータを送信する非同期アクションジェネレータであり、新しいポストをReduxストアに保存する別のアクションをディスパッチします。コンポーネント自体でthenを呼び出します）。それはアプリでうまく動作しますが、私はそれをテストすることに問題があります。

import React from 'react'; 
import { shallow } from 'enzyme'; 

import { AddPost } from '../../components/AddPost'; 
import posts from '../fixtures/posts'; 

let startAddPost, history, wrapper; 

beforeEach(() => { 
    startAddPost = jest.fn(); 
    history  = { push: jest.fn() }; 
    wrapper  = shallow(<AddPost startAddPost={startAddPost} history={history} />); 
}); 

test('handles the onSubmit call correctly',() => { 
    wrapper.find('PostForm').prop('onSubmit')(posts[0]); 

    expect(startAddPost).toHaveBeenLastCalledWith(posts[0]); 
    expect(history.push).toHaveBeenLastCalledWith('/'); 
}); 

だから私は明らかに渡すために、このテストを必要とするが、それは次のように出力して失敗します。

● handles the onSubmit call correctly 

TypeError: Cannot read property 'then' of undefined 

at AddPost._this.onSubmit (src/components/AddPost.js:9:37) 
at Object.<anonymous> (src/tests/components/AddPost.test.js:25:46) 
at process._tickCallback (internal/process/next_tick.js:109:7) 

それでは、どのように私はこの問題を解決することができますか？実際のアプリケーションではすべてがうまくいくので、これはテスト自体の問題だと思われます。ありがとうございました！

Answer 1

あなたのコードは最初にテスト可能ではありません。あなたは、コールバックが、この場合、上記のリダイレクトのために責任を負わなければならない

export function createPost(values, callback) { 
    const request = axios.post('http://localhost:8080/api/posts', values) 
    .then(() => callback()); 

    return { 
    type: CREATE_POST, 
    payload: request 
    }; 
} 

、アクションへのコールバックに渡し、そうのようなデータベースにデータを保存した後、それを実行します。アクションを使用するクライアントコードは、このようになります。

onSubmit(values) { 
    this.props.createPost(values,() => { 
     this.props.history.push('/'); 
    }); 
    } 

これにより、操作の柔軟性と再利用性が大幅に向上します。

次に、テストするときに、アクションにスタブを渡して、一度呼び出されたかどうかを確認できます。しかし、質の高い、テスト可能なコードを書くことは芸術です。

Answer 2

あなたのコードの問題はstartAddPost機能がが約束を返しませんが、あなたの実際のthis.props.startAddPost機能が約束を返すないモック関数であることです。

あなたのコードは動作しますが、テストしようとするとエラーが発生し、cannot read property....エラーが発生します。あなたの嘲笑機能はとても似Promiseを返すようにこの問題を解決するには

-

beforeEach(() => { 
    startAddPost = jest.fn().mockReturnValueOnce(Promise.resolve()) 
    ... 
}); 

mockReturnValueOncehereについては、こちらをご覧ください。