Как мне имитировать функцию в режиме реагирования с помощью Vitest?

Я пишу тест для модуля, который использует реакцию-модальное окно для открытия модального окна. 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 />
    );
  });
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На случай, если у кого-то еще возникнет эта проблема... Я решил ее, установив элемент приложения следующим образом:

<Modal appElement = {document.getElementById("root")!}>

И обертываем рендер в тесте в div с корневым идентификатором. Он все еще устанавливается aria-hidden=true, и я не получаю никаких ошибок от режима реагирования.

Издевательство оказалось не лучшим решением, потому что реагирующий модал выдает ошибку о том, что элемент приложения не был установлен.

Другие вопросы по теме