Unit testing a registration component with enzyme and jest - reactjs

Question

I am trying to unit test my registration component
const Register = () => {
const dispatch = useDispatch();
const currentUser = useSelector((state: RootState) => state.user.currentUser);
const errors = useSelector((state: RootState) => state.user.error);
const loading = useSelector((state: RootState) => state.user.loading);
const history = useHistory();
const [email, setEmail] = useState<UseState>({ text: "", touched: false });
const [firstName, setFirstName] = useState<UseState>({
text: "",
touched: false,
});
const [lastName, setLastName] = useState<UseState>({
text: "",
touched: false,
});
const [password, setPassword] = useState<UseState>({
text: "",
touched: false,
isValid: null,
});
const [confirmPassword, setConfirmPassword] = useState<UseState>({
text: "",
touched: false,
isValid: null,
});
const [error, setError] = useState<string>("");
useEffect(() => {
//cleanup
return () => {
dispatch(clearError());
};
//eslint-disable-next-line
}, []);
useEffect(() => {
if (currentUser && currentUser.jwt) {
setEmail({ text: "", touched: false });
setFirstName({ text: "", touched: false });
setLastName({ text: "", touched: false });
setPassword({ text: "", touched: false });
setConfirmPassword({ text: "", touched: false });
}
// eslint-disable-next-line
}, [currentUser]);
const handleRegister = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
password.text === confirmPassword.text &&
password.isValid &&
confirmPassword.isValid
) {
dispatch(
signUpStart({
email: email.text,
firstName: firstName.text,
lastName: lastName.text,
password: password.text,
confirmPassword: confirmPassword.text,
})
);
} else {
if (errors) {
// cleanup
return () => {
dispatch(clearError());
};
}
setError("Different passwords");
}
};
return (
<section className={styles.register__page}>
{loading && <Loading />}
<article className={styles.register__wrapper}>
<div className={styles.register__wrapper__header}>
<h1>Sign-up</h1>
<p>
Text
</p>
</div>
<div className={styles.register__wrapper__body}>
<form
onSubmit={(e) => handleRegister(e)}
className={styles.register__form}
>
<div className={styles.input__wrapper}>
<FontAwesomeIcon icon={faUser} />
<div className={styles.input__wrapper__inner}>
<input
required
type="email"
name="email"
id="email"
value={email.text}
onChange={(e) =>
setEmail({ text: e.target.value, touched: true })
}
/>
<label
htmlFor="email"
placeholder="E-mail"
className={email.text !== "" ? styles.filled : undefined}
>
E-mail
</label>
</div>
</div>
<div className={styles.input__wrapper}>
<FontAwesomeIcon icon={faUser} />
<div className={styles.input__wrapper__inner}>
<input
type="text"
name="firstname"
id="firstname"
value={firstName.text}
onChange={(e) =>
setFirstName({ text: e.target.value, touched: true })
}
/>
<label
htmlFor="firstname"
className={firstName.text !== "" ? styles.filled : undefined}
>
Name
</label>
</div>
</div>
<div className={styles.input__wrapper}>
<FontAwesomeIcon icon={faUser} />
<div className={styles.input__wrapper__inner}>
<input
type="text"
name="lastname"
id="lastname"
value={lastName.text}
onChange={(e) =>
setLastName({ text: e.target.value, touched: true })
}
/>
<label
htmlFor="lastname"
className={lastName.text !== "" ? styles.filled : undefined}
>
Surname
</label>
</div>
</div>
<div
className={[
styles.input__wrapper,
!password.isValid && password.touched
? styles.wrong
: styles.input__wrapper,
].join(" ")}
>
<FontAwesomeIcon icon={faKey} />
{!password.isValid && password.touched && (
<FontAwesomeIcon
icon={faExclamationCircle}
className={styles.errorIcon}
/>
)}
<div className={styles.input__wrapper__inner}>
<input
required
type="password"
name="password"
id="password"
value={password.text}
onChange={(e) => validateOnChange(e)}
/>
<label
htmlFor="password"
className={password.text !== "" ? styles.filled : undefined}
>
Hasło
</label>
</div>
</div>
<div
className={[
styles.input__wrapper,
!confirmPassword.isValid && confirmPassword.touched
? styles.wrong
: styles.input__wrapper,
].join(" ")}
>
<FontAwesomeIcon icon={faKey} />
{!confirmPassword.isValid && confirmPassword.touched && (
<FontAwesomeIcon
icon={faExclamationCircle}
className={styles.errorIcon}
/>
)}
<div className={styles.input__wrapper__inner}>
<input
required
type="password"
name="confirmPassword"
id="confirmPassword"
value={confirmPassword.text}
onChange={(e) => validateOnChange(e)}
/>
<label
htmlFor="confirmPassword"
className={
confirmPassword.text !== "" ? styles.filled : undefined
}
>
Confirm password
</label>
</div>
</div>
<button type="submit" className={styles.register__btn}>
Rejestruj
</button>
{errors && <p className={styles.error}>{errors}</p>}
{error !== "" && <p className={styles.error}>{error}</p>}
</form>
<p className={styles.login__link}>
Text
</p>
</div>
</article>
</section>
);
};
export default Register;
I tried several different approaches, however, none of them have worked for me so far. I ended up with something like that:
describe("Register /", () => {
it('register with proper credentials', () => {
const history = createMemoryHistory();
const component = mount(<Provider store={store}><Router history={history}><Register /></Router></Provider>);
component.find('input[name="firstname"]').simulate('change', {target: {name: 'firstname', value: 'Test'}});
component.find('input[name="lastname"]').simulate('change', {target: {name: 'lastname', value: 'Test'}});
component.find('input[name="password"]').simulate('change', {target: {name: 'password', value: 'TestSecret'}});
component.find('input[name="email"]').simulate('change', {target: {name: 'email', value: 'test#test.com'}});
})
After that I wanted to assert if the fields are filled in correctly and if the handleRegister is called but the fields are returning an empty string ("{}") and that's where I got stuck. What am I doing wrong?