vendredi 22 mai 2020

How test state react hooks when form submit with jest and enzyme

Guys how i can test state my state is update when i submit a form in test with jest and enzyme? Like i have state is update to true when i submit how i can verify that?

My component:

import React, { useState } from 'react'
import Service from "../../services/Service";
import { Link } from 'react-router-dom';
import { useDispatch } from "react-redux";
import { createMemoryHistory } from 'history';



const Register = (props) => {

  const [error, setError] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const history = createMemoryHistory();
  // const dispatch = useDispatch();



  const saveUser = e => {
    e.preventDefault();
    const data = {
      name: name,
      email: email,
      password: password
    };
    Service.signUp(JSON.stringify(data))
      .then(
        setSubmitted(true),
        // dispatch({
        //   type: "REGISTER_SUCCESS",
        //   payload: {
        //     name: name,
        //     email: email
        //   }
        // }),
        history.push('/logon')
      )
      .catch(error => {
        setError(error);
        console.log(error);
        // dispatch({
        //   type: "REGISTER_FAILED"
        // });
      })
  }


  const btn = name === '' || email === '' || password === '' || password !== confirmPassword
    ? <button disabled>Inscription</button> : <button>Inscription</button>

  // gestion erreurs

  const errorMsg = error !== '' && <span>{error.message}</span>
  const succeedMsg = submitted !== false && <span>{'inscription réussie!'}</span>

  const Msg = submitted !== false ?
    (
      succeedMsg
    )
    :
    (
      errorMsg
    )


  return (

    <div className="signUpLoginBox">
      <div className="slContainer">
        <div className="formBoxLeftSignup">
        </div>
          <div className="formContent">
            <form onSubmit={saveUser}>

              {Msg}

              <h2>Inscription</h2>
              <div className="inputBox">
                <input type="text" id="name" onChange={e => setName(e.target.value)} value={name} autoComplete="off" />
                <label htmlFor="name">Name</label>
              </div>

              <div className="inputBox">
                <input type="email" id="email" onChange={e => setEmail(e.target.value)} value={email} autoComplete="off" required />
                <label htmlFor="email">Email</label>
              </div>

              <div className="inputBox">
                <input type="password" id="password" onChange={e => setPassword(e.target.value)} value={password} autoComplete="off" required />
                <label htmlFor="password">Mot de passe</label>
              </div>
              <div className="inputBox">
                <input type="password" id="confirmPassword" onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} autoComplete="off" required />
                <label htmlFor="confirmPassword">Confirmez le mot de passe</label>
              </div>

              {btn}

            </form>
            <div className="linkContainer">
              <button className="simpleLink" href="/logon">Déjà inscrit? Connectez-vous </button>
            </div>
          </div>
      </div>
    </div>
  );
};

export default Register

my test : i want to verify the const submitted is = true. what i have to do after the simulate? i try : component.setState(state) but that tell me i can only use it in class component.

  it('Should call set submitted true when submit button is clicked', function () {

    const component = mount(<Register />);
    component.find('form').simulate('submit')

  })

Aucun commentaire:

Enregistrer un commentaire