Sinon 스텁 인스턴스 메소드가 mapDispatchToProps에 선언되었습니다.

Question

테스트 및 Reux Redux에 대한 새로운 정보가 있으므로 여기에서 몇 가지 문제를 집중시킬 수 있습니다. 예를 하나만 제시 하겠지만 mount(), shallow(), instance(), stub, spy 이상의 많은 조합을 시도했습니다.

const mapDispatchToProps = (dispatch, props) => ({ 
    setFooData(fooId, data) { 
     dispatch(Actions.setFooData(fooId, data)); 
    }, 
}); 

... 

return (
     <div fooId={this.props.fooId}> 
      <Foo {...fooProps}/> 
     </div> 
    ); 

내가 setFooData()가 호출되는 조건, componentDidMount() 및 componentWillReceiveProps() 같은 라이프 사이클 방식에서, 즉 조건의 주위에 몇 가지 테스트를 작성하고 싶습니다 : setFooData() 업데이트 REDUX 상태 Foo.props.data이 구성 요소를 감안할 때

.

setFooData() 서버 호출 등을 포함,이 테스트는 단지보기 층을 우려하고 구성 요소가 Foo.props.data의 결과로 렌더링하는 방법을 setFooData()에 의해 최종적으로 설정되어 있기 때문에, setFooData()가 stub에 대한 좋은 후보처럼 보인다 때문입니다.

따라서 mount()이 아닌 효소의 shallow()이 적절하다고 보시겠습니까? 어떤 경우에는, 때 나는 stubsetFooData()하려고 :

let wrapper = return shallow(<Foo {...props}/>); 
let stub = sinon.stub(wrapper.instance(), 'setFooData'); 

내가 오류가 나타납니다

검사시 Attempted to wrap undefined property setFooData as function

, wrapper.instance()이 setFooData()이 참으로 정의되지 않은 객체를 산출을하지만, 다른에 따라 예를 들어, 나는 그것이 있어야한다고 생각할 것이다. 또한

, setFooData()는 wrapper.instance().selector.props에 존재하고,이 I let stub = sinon.stub(wrapper.instance().selector.props, 'setFooData'); 않는 개체 setFooData() =/= stub 검사시 오류를 방지하고, 기능 시험에 따라 호출되지된다. 내가 setFooData()의 몸에 관한 나타납니다 다른 오류가 발생

let wrapper = mount(<Provider store={store}><Foo {...props}/></Provider>); 

let componentDidMountSpy = sinon.spy(Foo.prototype, 'componentDidMount'); 
let componentWillReceivePropsSpy = sinon.spy(Foo.prototype, 'componentWillReceiveProps'); 

expect(componentDidMountSpy.called).to.be.true;   //passes 
expect(componentWillReceivePropsSpy.called).to.be.true; //passes 
expect(stub.called).to.be.true;       //fails 

내가 대신 mount()를 사용하므로 setFooData()가 호출되지만 기능은 실제로 실행되는 자사의 실제 몸을 방지하기 위해 스텁되지 않는다 .

내 이해를 명확히하는 데 도움을 주셔서 감사합니다.

Answer 1

나는 당신이 가장 어려운 길을 가고 있다고 생각합니다. connect이 아닌 별도로 구성 요소를 테스트해야합니다. connect 구성 요소를 테스트하는 경우 통합 테스트를 수행하고 connect이 실제로 작동하는지 이중 테스트합니다. 그것은 이미 당신을 위해 react-redux에서 테스트되었습니다.

대신 단원 테스트에서 작업 제작자를 직접 테스트하십시오. 그런 다음 연결하지 않고 내보내기로 구성 요소를 내보내고 연결 버전에 대한 기본 내보내기를 사용하십시오.

그런 식으로 순수한 React 버전을 가져 와서 나중에 원하는 부분을 쉽게 전달할 수 있습니다. 그러면 쉽게 어설 션을 만들 수 있습니다.특별히 무언가가 그 수명주기 방법에서 발생하는지 테스트해야하는 경우

, 당신은 instance에서 해당 메서드를 호출 할 수 있습니다 :

const fakeActionCreator = sinon.spy() 
const subject = mount(<MyComponent doSomething={ fakeActionCreator } />) 
subject.instance().componentDidMount() 
assert.equal(fakeActionCreator.callCount, 1)