반환 값은`then` 재산

Question

이없는 나는이 내 반작용 구성 요소 중 하나에서 다음과 같은 비동기 호출 :

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

여기서의 목표는 인덱스 페이지로 사용자를 리디렉션 만 일단 게시물이 Redux에 저장되면 (startAddPost은 액시스를 사용하여 외부 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을 읽어보십시오.