React Redux로 주입 한 테스트 속성

속성이 errorMessage이 아닌 경우 버튼을 렌더링하는 구성 요소가 있습니다. null입니다.React Redux로 주입 한 테스트 속성

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); 
    });

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

출처

2017-10-18 rel1x

테스트 프레임 워크에 대해 이야기하고 있습니까? – Akhil

원하는대로 속성을 설정하여 구성 요소를 렌더링합니다. React의 주요 장점 중 하나는 구성 요소의 연결되지 않은 버전을 내보내고 정상적으로 테스트 할 수 있다는 것입니다. 속성 값 자체의 논리는 Redux 테스트에서 테스트됩니다. –

@DaveNewton 당신은 버튼을 클릭해서 테스트해서는 안된다는 뜻입니까? – rel1x

삭제 한 이전 질문에 게시 한 것처럼 버튼 클릭을 테스트하려면 가장 좋은 방법은 '연결되지 않은'구성 요소를 호출하는 것입니다. 연결된 구성 요소를 테스트하려면 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();

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

출처

2017-10-18 20:49:11

React Redux로 주입 한 테스트 속성

답변

관련 문제