Библиотека тестирования React: Невозможно найти текст в пользовательском модале, используя диалог MUI ⇐ Javascript

[Anonymous]

Я пишу тест для компонента React, который показывает модал ошибки, когда вывоз сбое. Компонент внутри использует пользовательский модал, который завершает @mui/material/dialog . Вот упрощенная версия моего теста: < /p>
it('should show error message when fetch fails', async () => {

const mockToken = { access_token: 'fake-token', expires_in: -899 };

(global.fetch as jest.Mock).mockResolvedValueOnce({
ok: true,
json: () => Promise.resolve(mockToken),
});

(global.fetch as jest.Mock).mockResolvedValueOnce({
ok: false,
status: 500,
json: () => Promise.resolve({
code: 'ERROR-500',
title: 'Internal error',
detail: 'Error fetching accounts',
timestamp: '2025-08-18T12:00:00Z'
}),
});

render(



);

// Sets a email in the input
const input = screen.getByLabelText(/Inform the email/i);
fireEvent.change(input, { target: { value: 'test@email.com' } });

// Clicks the search button
const searchButton = screen.getByRole('button', { name: /Search/i });
fireEvent.click(searchButton);

expect(screen.queryByText('test@email.com')).not.toBeInTheDocument();
expect(screen.queryByText('Account Test')).not.toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/Error fetching accounts/i)).toBeInTheDocument();
});
});
< /code>
Проблема состоит в том, что тест не выполняется со следующей ошибкой: < /p>
Unable to find an element with the text: Error fetching accounts. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
< /code>
Вещи, которые я пробовал: < /p>

Использование regex: < /li>
< /ol>
const modalTitle = await screen.findByText(/Error fetching accounts/i);
expect(modalTitle).toBeInTheDocument();
< /code>
та же ошибка < /p>

Используя пользовательскую функцию: < /li>
< /ol>
const modalTitle = await screen.findByText((content) =>
content.includes('Error fetching accounts')
);
expect(modalTitle).toBeInTheDocument();
< /code>
ошибка: < /p>
Unable to find an element with the text: (content) => content.includes('Error fetching accounts'). This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
< /code>

Запрос диалога по роли: < /li>
< /ol>
const dialog = await screen.findByRole('dialog');
expect(within(dialog).getByText(/Error fetching accounts/i)).toBeInTheDocument();
< /code>
ошибка: < /p>
Unable to find role="dialog"
< /code>
Я подозреваю, что проблема заключается в том, что модал отображается асинхронно или на портале (в диалоге MUI используется Reactdom.createportal). Как мне правильно проверить, что сообщение об ошибке отображается в диалоговом окне MUI с использованием библиотеки испытаний React?


Подробнее здесь: https://stackoverflow.com/questions/797 ... mui-dialog