Реактивная библиотека тестирования - тест предупреждения не был включен в действие (...) - PullRequest
1 голос
/ 30 апреля 2020

При использовании react-testing-library для проверки моего компонента я получаю предупреждение

Warning: An update to ManageAuthorPage inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...):

Вот мой тест - он проходит, но отображается предупреждение:

it("should display error message when creatingAuthor throws error", async () => {
  const errorMessage = "Error saving";

  const routerHistory = createMemoryHistory();
  const props = {
    createAuthor: jest.fn().mockRejectedValue(new Error(errorMessage)),
    history: routerHistory,
    author: {},
    authors: [],
    loadAuthors: jest.fn().mockResolvedValue(),
  };
  const { getByText, getByLabelText } = render(
    <Router history={routerHistory}>
      <ManageAuthorPage {...props} />
    </Router>
  );

  fireEvent.change(getByLabelText("Name"), { target: { value: "New Name" } });
  fireEvent.click(getByText("Save"));

  await waitForElement(() => getByText(errorMessage));
});

Вот фрагмент кода родительского компонента, который обрабатывает сохранение

function handleSave(event) {
    event.preventDefault();
    if (!isFormValid()) {
      return;
    }
    createAuthor(author)
      .then(() => {
        toast.success("Author created");
        history.push("/authors");
      })
      .catch((error) => {
        setErrors({ ...errors, onSave: error.message });
          });

  }

И дочернего компонента, который отображает кнопку сохранения

function AuthorForm({ author, onChange, errors = {}, onSave, onCancel }) {
  return (
    <form onSubmit={onSave}>
      {errors.onSave && (
        <div className="alert alert-danger" role="alert">
          {errors.onSave}
        </div>
      )}
      <TextInput
        name="name"
        label="Name"
        value={author.name}
        onChange={onChange}
        error={errors.name}
      ></TextInput>
      <button type="submit" className="btn btn-primary">
        Save
      </button>
      <button onClick={onCancel} className="btn btn-danger ml-2">
        Cancel
      </button>
    </form>
  );
}

Из того, что у меня есть читайте в документации, вам не нужно ничего оборачивать внутри act(...), если вы используете waitForElement() с реагирующей библиотекой, она сделает это за вас. Я также попробовал все возможные способы упаковки различных фрагментов в act(...), используя await всеми возможными способами. Либо тест не пройден из-за TimeoutSession, либо из-за неправильного использования Promise

Я новичок, чтобы реагировать и реагировать на тестирование. Я просто хочу убедиться, что я не понял ничего фундаментального. Я нахожу все это await act(...) очень запутанным

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...