Ошибки при использовании React Testing Library и renderHook для тестирования хуков с несколькими контекстами

Question

Решено

Проблема отслеживается на github

I пытался протестировать пользовательские ловушки с помощью библиотеки реагирующего тестирования и ловушки I Попытка поставить под тест требует, чтобы несколько поставщиков контекста работали правильно. (аутентификация и уведомление)

Документация здесь описывает только создание оболочки с одним провайдером, например так:

const wrapper = ({ children }) => <ContextProvider>{children}</ContextProvider>

Однако моей реализации требовалось нечто более сложное, вот так:

const wrapper = ({ children }) => (
    <ToastProvider>
        <NotificationProvider>
            <AuthProvider>{children}</AuthProvider>
        </NotificationProvider>
    </ToastProvider>
);

Это было неудачно при каждой попытке с ошибками:

TypeError: parentInstance.children.indexOf is not a function

ИЛИ

Invariant Violation: Drop(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Приводит меня к мысли, что не было ясного способ предоставления правильного контекста без отказа от renderHook все вместе и создание тестового компонента, который мог бы вручную запускать необходимое поведение.

После гораздо большего количества копаний я обнаружил эту ошибку, похороненную в журналах:

Warning: An invalid container has been provided. This may indicate that another renderer is being used in addition to the test renderer. (For example, ReactDOM.createPortal inside of a ReactTestRenderer tree.) This is not supported.

Конечно, оказывается, что существует конфликт с react-test-renderer и react-dom, который вызывает сбой при вызове ReactDOM.createPortal во время тестирования. Я предполагаю, что это где-то в ToastProvider, но обходной путь довольно прост.

Решено, добавив это в начало моего теста:

ReactDOM.createPortal = node => node