web-dev-qa-db-fra.com

Comment tester la soumission d'un formulaire dans React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined

J'écris un test pour vérifier si le composant de notification d'erreur s'affiche si le formulaire de connexion est soumis sans données.

describe('User signin', () => {
    it('should fail if no credentials are provided', () => {
        const loginComponent = shallow(<Login />);
        expect(loginComponent.find('.form-login').length).toBe(1);
        loginComponent.find('.form-login').simulate('submit');
        expect(loginComponent.find(Notification).length).toBe(1);
    });
});

Il semble que .simulate Fonctionne lorsque le test atteint ma fonction handleSubmit, mais je rencontre cette erreur dans le test:

TypeError: Impossible de lire la propriété 'preventDefault' de indéfini

enter image description here

La fonction handleSubmit

handleSubmit(e) {
    e.preventDefault();  // <-- problem here
    const user = this.state.username;
    const pass = this.state.password;
    const gotoDashboard = () => this.props.history.Push('/dashboard');

    const postLogin = (user, pass) => {
        api.userLogin(user, pass)

Mon test passera si je supprime la ligne e.preventDefault();, mais j'ai besoin de cette ligne pour empêcher l'événement de soumission de formulaire par défaut.

javascriptreactjstestingjestjsenzyme
9
Leon Gaban

Je l'ai compris rapidement ... J'avais juste besoin de créer un faux événement avec une fausse fonction preventDefault et de le transmettre:

describe('User signin', () => {
    it('should fail if no credentials are provided', () => {
        const fakeEvent = { preventDefault: () => console.log('preventDefault') };
        const loginComponent = shallow(<Login />);
        expect(loginComponent.find('.form-login').length).toBe(1);
        loginComponent.find('.form-login').simulate('submit', fakeEvent);
        expect(loginComponent.find(Notification).length).toBe(1);
    });
});
10
Leon Gaban