При использовании 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(...)
очень запутанным