Propriétés de test injectées par React Redux

Question

J'ai un composant qui restitue un bouton si une propriété errorMessage n'est pas 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> 
    ); 
    } 
} 

La propriété injectée par React Redux:

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

Comme vous pouvez le voir, j'ai aussi resetErrorMessage que efface errorMessage:

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

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

    return state; 
}; 

Comment puis-je tester mon élément et dire si je cliquez sur le bouton, puis cache le bouton ou si errorMessage n'est pas null affiche le bouton?

Je veux obtenir quelque chose comme ceci:

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

Mais mon problème est que si je simule cliquer pour fermer le bouton - message d'erreur ne se cache pas.

Answer 1

Comme je l'ai posté dans la question précédente vous avez supprimé, si vous voulez tester les clics sur les boutons, votre meilleur pari serait d'appeler le composant «non connecté». Si vous voulez tester le composant connecté, vous devez y passer un mockstore.

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

importer donc l'application dans votre test et il suffit de passer la fonction resetErrorMessage en fonction moqué, comme ce que vous faites avec plaisanterie.

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

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

Mon conseil serait de tester uniquement le composant connecté lorsque vous voulez manipuler directement à partir des changements de magasin.