vendredi 22 mai 2020

React test with jest/enzyme received value is empty

Guys i try to do some react test with enzyme and react but i don't understand really how it works i have 5 test 1 passed and 4 other configured same don't i don't see why can you see what the issues?

my component:

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



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 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
        //   }
        // }),
        props.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

and the tests:

import React from "react";
import setupTests from '../../setupTests'
import Register from "./Register";
import { mount, shallow } from 'enzyme';

describe('<Register>', function() {
  it('Should capture name correctly onChange', function(){

    const component = mount(<Register />);
    const input = component.find('input').at(0);
    input.instance().value = 'anthony';
    input.simulate('change');
    expect(component.find('input').at(0).props().value).toEqual('anthony');
  })

  it('Should capture email correctly onChange and change the props accordingly', function(){

    const component = mount(<Register />);
    const input = component.find('input').at(1);
    input.instance.value = 'anthone97one@hotmail.com';
    input.simulate('change');
    expect(component.find('input').at(1).props().value).toEqual('anthone97one@hotmail.com');
  })

  it('Should capture email correctly onChange and change the state accordingly', function(){

    const component = mount(<Register />);
    const input = component.find('input').at(1);
    input.instance.value = 'anthone97one@hotmail.com';
    input.simulate('change');
    expect(component.state().email).toEqual('anthone97one@hotmail.com');

  })

  it('Should capture password correctly on change and the state', function(){

    const component = mount(<Register />);
    const input = component.find('input').at(2);
    input.instance.value = '123456';
    input.simulate('change');
    expect(component.find('input').at(2).props().value).toEqual('123456')

  })

  it('Should capture password correctly on change and the state', function(){

    const component = mount(<Register />);
    const input = component.find('input').at(3);
    input.instance.value = '123456';
    input.simulate('change');
    expect(component.find('input').at(3).props().value).toEqual('123456')

  })
})

the first test for the name is passed but the other don't. I'm really new to this so i don't understand. the error is for all is the received value is empty!

 <Register> › Should capture email correctly onChange and change the props accordingly

    expect(received).toEqual(expected) // deep equality

    Expected: "anthone97one@hotmail.com"
    Received: ""

      20 |     input.instance.value = 'anthone97one@hotmail.com';
      21 |     input.simulate('change');
    > 22 |     expect(component.find('input').at(1).props().value).toEqual('anthone97one@hotmail.com');
         |                                                         ^
      23 |   })
      24 | 
      25 |   it('Should capture email correctly onChange and change the state accordingly', function(){

      at Object.<anonymous> (src/components/Auth/Register.test.js:22:57)

Aucun commentaire:

Enregistrer un commentaire