React Redux로 주입 한 테스트 속성

Question

속성이 errorMessage이 아닌 경우 버튼을 렌더링하는 구성 요소가 있습니다. null입니다.

class App extends Component { 
    static propTypes = { 
    // Injected by React Redux 
    errorMessage: PropTypes.string, 
    resetErrorMessage: PropTypes.func.isRequired, 
    }; 

    renderErrorMessage() { 
    const { errorMessage } = this.props; 
    if (!errorMessage) return null; 

    return (
     <p id="error-message"> 
     <b>{errorMessage}</b>{' '} 
     <button id="dismiss" onClick={this.props.resetErrorMessage()}> 
      Dismiss 
     </button> 
     </p> 
    ); 
    } 

    render() { 
    return (
     <div className="app"> 
     {this.renderErrorMessage()} 
     </div> 
    ); 
    } 
} 

속성은 반작용 돌아 오는에 의해 주입 :

import { connect } from 'react-redux'; 
import App from '../components/App/App'; 

const mapStateToProps = (state, ownProps) => ({ 
    errorMessage: state.errorMessage, 
}); 

export default connect(mapStateToProps, { 
    resetErrorMessage:() => ({ 
    type: 'RESET_ERROR_MESSAGE', 
    }) 
})(App); 

당신은 내가 또한 errorMessage 웁니다 그 resetErrorMessage이 볼 수 있듯이 :

const errorMessage = (state = null, action) => { 
    const { type, error } = action; 

    if (type === RESET_ERROR_MESSAGE) { 
    return null; 
    } else if (error) { 
    return error; 
    } 

    return state; 
}; 

가 어떻게 내 구성 요소를 테스트하고 나는 경우 말할 수 있습니다 버튼을 클릭 한 다음 버튼을 숨기거나 errorMessage이 아닌 경우 null 버튼이 표시됩니까?

내가 이런 걸하고 싶지 :

const props = { 
    errorMessage: 'Service Unavailable', 
    resetErrorMessage, 
}; 
it('renders error message',() => { 
    const wrapper = shallow(<App {...props} />); 
    expect(wrapper.find('#error-message').length).toBe(1); 
    wrapper.find('#dismiss').simulate('click'); 
    expect(wrapper.find('#error-message').length).toBe(0); 
    }); 

을하지만 지금 내 문제는 내가 시뮬레이션 할 경우 버튼을 기각합니다 것입니다 - 오류 메시지가 숨기지 않습니다.

Answer 1

삭제 한 이전 질문에 게시 한 것처럼 버튼 클릭을 테스트하려면 가장 좋은 방법은 '연결되지 않은'구성 요소를 호출하는 것입니다. 연결된 구성 요소를 테스트하려면 mockstore를 해당 구성 요소에 전달해야합니다.

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

그래서 테스트에서 응용 프로그램을 가져 와서 바로 그런 당신이 농담으로 무엇을 같이 조롱 함수로 resetErrorMessage 기능을 전달합니다.

const resetErrorMessage = jest.fn(() => {}); 
const wrapper = shallow(<App {...props} resetErrorMessage={resetErrorMessage} />); 

wrapper.find('#dismiss').simulate('click'); 
expect(resetErrorMessage).toHaveBeenCalled(); 

내 조언은 저장소 변경에서 직접 조작하려는 경우에만 연결된 구성 요소를 테스트하는 것입니다.