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