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

Reduxのに反応によって注入プロパティ：

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

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

    return state; 
}; 

どのように私は私のコンポーネントをテストし、私ならば言うことができます：あなたは私もerrorMessageをクリアresetErrorMessageを持って見ることができるように

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が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

削除した前の質問に投稿したように、ボタンのクリックをテストする場合は、「接続されていない」コンポーネントを呼び出すことをおすすめします。接続されたコンポーネントをテストする場合は、モックストアをそのように渡す必要があります。

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

アドバイスは、ストアの変更から直接操作したいときにのみ接続コンポーネントをテストすることです。