тестирование входных событий с помощью библиотеки тестирования реакции

Question

Я создал небольшую клавиатуру приложения для реакции, и я пытаюсь протестировать событие ввода в приложении, и по какой-то причине я не получаю ожидаемого результата. Я пытаюсь проверить это на неудачу и успех. Тест, который я выполняю, приведен ниже, я хочу ввести 1995 (правильную комбинацию), нажать кнопку разблокировки и, в конечном итоге, получить сообщение, возвращающее Unlocked!, но оно возвращает только Incorrect Code!, что должно произойти, только если код неверно или поле ввода пустое. Но он не должен быть пустым, так как я заполнил его в тесте ..

вот код и ящик: https://codesandbox.io/s/quirky-cloud-gywu6?file= / src / App.test. js: 0-26

Есть идеи?

тест:

const setup = () => {
  const utils = render(<App />);
  const input = utils.getByLabelText("input-code");
  return {
    input,
    ...utils
  };
};

test("It should return a successful try", async () => {
  const { input, getByTestId } = setup();
  await act(async () => {
    fireEvent.change(input, { target: { value: "1995" } });
  });
  expect(input.value).toBe("1995");

  await act(async () => {
    fireEvent.click(getByTestId("unlockbutton"));
  });
  expect(getByTestId("status")).toHaveTextContent("Unlocked!");
});

компонент, который я пытаюсь протестировать

import React, { useState, useEffect } from "react";

import Keypad from "./components/Keypad";

import "./App.css";
import "./css/Result.css";

function App() {
  //correctCombination: 1995

  const [result, setResult] = useState("");
  const [locked, setLocked] = useState("Locked");
  const [tries, setTries] = useState(0);
  const [hide, setHide] = useState(true);

  //Along with the maxLength property on the input,
  // this is also needed for the keypad
  useEffect(() => {
    (function() {
      if (result >= 4) {
        setResult(result.slice(0, 4));
      }
    })();
  }, [result]);

  const onClick = button => {
    switch (button) {
      case "unlock":
        checkCode();
        break;
      case "clear":
        clear();
        break;
      case "backspace":
        backspace();
        break;
      default:
        setResult(result + button);
        break;
    }
  };

  const checkCode = () => {
    if (result === "1995") {
      setLocked("Unlocked!");
      setTries(0);
    } else if (tries === 3) {
      setHide(false);
      setLocked("Too many incorrect attempts!");
      setTimeout(() => {
        setHide(true);
      }, 3000);
    } else {
      setLocked("Incorrect code!");
      setTries(tries + 1);
    }
  };

  const clear = () => {
    setResult("");
  };

  const backspace = () => {
    setResult(result.slice(0, -1));
  };

  const handleChange = event => {
    setResult(event.target.value);
  };

  return (
    <div className="App">
      <div className="pin-body">
        <h1>Pin Pad</h1>
        <div className="status">
          <h2 data-testid="status">{locked}</h2>
        </div>
        <div className="result">
          <input
            maxLength={4}
            type="phone"
            aria-label="input-code"
            data-testid="inputcode"
            placeholder="Enter code"
            onChange={handleChange}
            value={result}
          />
        </div>
        {hide ? <Keypad onClick={onClick} /> : false}
      </div>
    </div>
  );
}

export default App;