Как протестировать форму ввода, которая отправляет чат при вводе, с помощью библиотеки тестирования React? ⇐ Javascript
-
Гость
Как протестировать форму ввода, которая отправляет чат при вводе, с помощью библиотеки тестирования React?
У меня есть следующее окно чата, которое отправляет чат, когда кто-то нажимает Enter. В обычной жизни это работает так, как и ожидалось, но RTL с этим не согласен.
import React, { useState } из «реагировать»; экспортировать функцию по умолчанию Test() { const [chatText, setChatText] = useState(""); функция sendChat() { setChatText(""); } возвращаться ( { setChatText(e.target.value); }} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { е.stopPropagation(); е.preventDefault(); отправитьЧат(); } }} aria-label="чат-вход" /> Отправить ); } Все работает нормально. Вы отправляете текст, и окно чата очищается, когда вы нажимаете Enter.
Ниже приведен тест, который я написал на RTL, но он не работает.
импортировать React из «реагировать»; import { render, screen, waitFor, act} из "@testing-library/react"; импортировать "@testing-library/jest-dom"; импортировать пользователя из «@testing-library/user-event»; импортировать тест из "./index"; описать("Чат", () => { test("Очистить текст при вводе", async () => { рендер(); let textBox = screen.getByLabelText("чат-ввод"); ожидайте действия (async () => { textBox.focus(); ожидать (textBox).toHaveFocus(); await user.keyboard("привет"); await user.keyboard("{Enter}"); await user.keyboard("привет"); ожидайте waitFor(() => { ожидать (textBox).toHaveValue («привет»); }); }); }); }); Я написал неправильный тест или что-то не так с кодом? RTL не запускает очистку при вводе, вместо этого отображается hellohello
У меня есть следующее окно чата, которое отправляет чат, когда кто-то нажимает Enter. В обычной жизни это работает так, как и ожидалось, но RTL с этим не согласен.
import React, { useState } из «реагировать»; экспортировать функцию по умолчанию Test() { const [chatText, setChatText] = useState(""); функция sendChat() { setChatText(""); } возвращаться ( { setChatText(e.target.value); }} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { е.stopPropagation(); е.preventDefault(); отправитьЧат(); } }} aria-label="чат-вход" /> Отправить ); } Все работает нормально. Вы отправляете текст, и окно чата очищается, когда вы нажимаете Enter.
Ниже приведен тест, который я написал на RTL, но он не работает.
импортировать React из «реагировать»; import { render, screen, waitFor, act} из "@testing-library/react"; импортировать "@testing-library/jest-dom"; импортировать пользователя из «@testing-library/user-event»; импортировать тест из "./index"; описать("Чат", () => { test("Очистить текст при вводе", async () => { рендер(); let textBox = screen.getByLabelText("чат-ввод"); ожидайте действия (async () => { textBox.focus(); ожидать (textBox).toHaveFocus(); await user.keyboard("привет"); await user.keyboard("{Enter}"); await user.keyboard("привет"); ожидайте waitFor(() => { ожидать (textBox).toHaveValue («привет»); }); }); }); }); Я написал неправильный тест или что-то не так с кодом? RTL не запускает очистку при вводе, вместо этого отображается hellohello
Мобильная версия