Question

已解决

在github上跟踪了问题

我正在尝试使用react测试库测试自定义钩子，而我正尝试测试的钩子需要多个上下文提供程序才能正常工作。（身份验证和通知）

文档here仅概述了使用单个提供程序创建包装的方法，例如：

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

但是，我的实现需要更复杂的东西，例如：

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

每次尝试都失败，并显示以下错误：

TypeError: parentInstance.children.indexOf is not a function

OR

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

使用React Testing Library和renderHook来测试具有多个上下文的钩子时的错误

已解决

0 个答案: