Reactjs 使用React测试库和renderHook测试具有多个上下文的挂钩时出错 解决了的

问题被追踪到

我试图使用react测试库测试定制钩子，而我试图测试的钩子需要多个上下文提供程序才能正常工作。（认证和通知）

文档仅概述了如何使用单个提供程序创建包装，如下所示：

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

或

这让我相信，如果不一起放弃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

---

如果你在单元测试useAuth，你只需要测试它是否返回了

useContext（authContext）

的结果，所以如果你要模拟useContext和createContext，你就可以测试它了。我最后重写了这篇文章，以反映我遇到的真正问题，并且只是为了提供信息。可以使用多个上下文包装renderHook，只要没有冲突的渲染器，这可能发生在react dom和react test渲染器之间。我想标记为此渲染器的副本，因为它有更详细的描述。也许你可以把它换成一个问题，提供并接受你自己的答案？在那之后，其他类似的问题可以与这个问题联系起来。

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

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.

ReactDOM.createPortal = node => node