연결된 Redux 구성 요소를 테스트 할 때의 요령

Question

아래에 내 구성 요소를 붙여 넣었습니다. Component가 마운트되면 기본적으로 API에서 메시지를 반환하는 fetchMessage Action을 호출합니다. 이 메시지는 mapStateToProps 함수에서 state.feature.message으로 설정됩니다.

나는이 구성 요소 테스트를 어디서 시작해야 할 지 전혀 모르겠습니다. 나는 것을 테스트 할 것을 알고 :

1) 기능의 구성 요소가 렌더링

props의 fetchMessage 기능이

3

라고 2))이 표시 또는 사용하여 렌더링 할 때 올바른 message 속성이 있습니다 그

아래에서 볼 수 있듯이 테스트 파일을 설정하려고했지만 모든 시도에서 오류가 발생하면 반복되는 오류가 발생합니다.

누구나 내가 옳은 방향으로 나를 잘못 지적 할 수 있습니까?

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions'; 

class Feature extends Component { 
    static propTypes = { 
    fetchMessage: PropTypes.func.isRequired, 
    message: PropTypes.string 
    } 

    componentWillMount() { 
    this.props.fetchMessage(); 
    } 

    render() { 
    return (
     <div>{this.props.message}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { message: state.feature.message }; 
} 

export default connect(mapStateToProps, actions)(Feature); 

테스트 파일 :

import configureStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import expect from 'expect'; 
import { shallow, render, mount } from 'enzyme'; 
import React from 'react'; 
import sinon from 'sinon'; 

import Feature from '../index'; 

const mockStore = configureStore([thunk]); 

describe('<Feature />',() => { 
    let store; 

    beforeEach(() => { 
    store = mockStore({ 
     feature: { 
     message: 'This is the message' 
     } 
    }); 
    }); 

    it('renders a <Feature /> component and calls fetchMessage',() => { 
    const props = { 
     fetchMessage: sinon.spy() 
    }; 

    const wrapper = mount(
     <Provider store={store}> 
     <Feature {...props} /> 
     </Provider> 
    ); 

    expect(wrapper.find('Feature').length).toEqual(1); 
    expect(props.fetchMessage.calledOnce).toEqual(true); 
    }); 
}); 

Answer 1

테스트 연결이 구성 요소의 연결 및 연결되지 않은 버전의 구성 요소

를 사용하여 별도의 수출 반응한다.

이름없는 내보내기로 연결되지 않은 구성 요소를 내보내고 기본 내보내기로 연결합니다.

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions'; 

// export the unwrapped component as a named export 
export class Feature extends Component { 
    static propTypes = { 
    fetchMessage: PropTypes.func.isRequired, 
    message: PropTypes.string 
    } 

    componentWillMount() { 
    this.props.fetchMessage(); 
    } 

    render() { 
    return (
     <div>{this.props.message}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { message: state.feature.message }; 
} 

// export the wrapped component as a default export 
export default connect(mapStateToProps, actions)(Feature); 

는 아래 그림과 같이 연결 구성 요소가 제공 구성 요소에 싸여해야 기억하십시오.

반면에 연결되지 않은 구성 요소는 Redux 저장소에 대해 알 필요가 없으므로 격리되어 테스트 할 수 있습니다.

테스트 파일 :

import configureStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import expect from 'expect'; 
import { shallow, render, mount } from 'enzyme'; 
import React from 'react'; 
import sinon from 'sinon'; 

// import both the wrapped and unwrapped versions of the component 
import ConnectedFeature, { feature as UnconnectedFeature } from '../index'; 

const mockStore = configureStore([thunk]); 

describe('<Feature />',() => { 
    let store; 

    beforeEach(() => { 
    store = mockStore({ 
     feature: { 
     message: 'This is the message' 
     } 
    }); 
    }); 

    it('renders a <Feature /> component and calls fetchMessage',() => { 
    const props = { 
     fetchMessage: sinon.spy() 
    }; 

    const wrapper = mount(
     <Provider store={store}> 
     <connectedFeature {...props} /> 
     </Provider> 
    ); 

    expect(wrapper.find('Feature').length).toEqual(1); 
    expect(props.fetchMessage.calledOnce).toEqual(true); 
    }); 
}); 

Answer 2

당신은 당신의 구성 요소를 테스트하기 위해 shallow() 대신 mount()를 사용할 수 있습니다. shallow() 메서드는 componentWillMount() 수명주기 메서드를 호출하므로 mount()을 사용할 이유가 없습니다. (면책 조항 :. 아직 꽤 잘 mount()에서 아닙니다) 연결 구성 요소의

,이 같은 저장소 개체를 전달할 수 있습니다

<connectedFeature {...props} store={store} /> 

을 그리고 당신은 그것이 작동되도록 두 번 shallow() 메소드를 호출한다 연결된 구성 요소의 경우 :

const wrapper = shallow(<connectedFeature {...props} store={store} />).shallow()