Я пишу тест для модуля, который использует реакцию-модальное окно для открытия модального окна. React-modal требует, чтобы вы установили корневой элемент из соображений доступности.
if (typeof document != "undefined") {
Modal.setAppElement("#root");
}
Однако это вызывает ошибку в тестах: «Ошибка: реагировать-модально: элементы для селектора #root не найдены».
Я хочу высмеять функцию setAppElement в режиме реагирования, но я явно что-то упускаю, потому что мои попытки не имеют никакого значения. Если бы кто-нибудь мог указать, что я делаю неправильно (или какое-либо другое решение, которое я мог бы сделать в рамках теста), я был бы очень признателен.
describe("CustomModal", () => {
vi.mock("react-modal", async () => {
const actual = await vi.importActual("react-modal");
return { ...actual, setAppElement: () => {} };
});
it("Renders successfully", () => {
render(
<CustomModal />
);
});
});
На случай, если у кого-то еще возникнет эта проблема... Я решил ее, установив элемент приложения следующим образом:
<Modal appElement = {document.getElementById("root")!}>
И обертываем рендер в тесте в div с корневым идентификатором. Он все еще устанавливается aria-hidden=true
, и я не получаю никаких ошибок от режима реагирования.
Издевательство оказалось не лучшим решением, потому что реагирующий модал выдает ошибку о том, что элемент приложения не был установлен.