Блог

Я пытаюсь провести модульное тестирование своего компонента регистрации

 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 amp;amp; 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 amp;amp;
      password.isValid amp;amp;
      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 amp;amp; <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 amp;amp; password.touched
                  ? styles.wrong
                  : styles.input__wrapper,
              ].join(" ")}
            >
              <FontAwesomeIcon icon={faKey} />
              {!password.isValid amp;amp; password.touched amp;amp; (
                <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 amp;amp; confirmPassword.touched
                  ? styles.wrong
                  : styles.input__wrapper,
              ].join(" ")}
            >
              <FontAwesomeIcon icon={faKey} />
              {!confirmPassword.isValid amp;amp; confirmPassword.touched amp;amp; (
                <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 amp;amp; <p className={styles.error}>{errors}</p>}
            {error !== "" amp;amp; <p className={styles.error}>{error}</p>}
          </form>
          <p className={styles.login__link}>
            Text
          </p>
        </div>
      </article>
    </section>
  );
};

export default Register;
 

Я попробовал несколько разных подходов, однако ни один из них до сих пор не сработал для меня. В итоге у меня получилось что-то в этом роде:

 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'}});
        })
 

После этого я хотел проверить, правильно ли заполнены поля и вызывается ли регистр обработчиков, но поля возвращают пустую строку («{}»), и вот где я застрял. Что я делаю не так?