在多模块项目中使用自定义React Hook进行Jest测试时出错

Question

我有一个包含多个Webpack模块的项目。在我的子模块中，我想创建一个自定义的React钩子，我可以在父模块的React组件中使用它。

我的钩子示例很简单：

export function useTitle(title: string): void {
useEffect(() => {
document.title = title
}, [title]);
}

然而，当在模块外的React组件中使用我的自定义挂钩时，我会得到一个错误：

错误：钩子调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本

我认为原因是为每个Webpack模块创建了一个React实例。将子模块的React实例和父模块的Reack实例进行比较的Jest测试也显示了这一点。

import {react} from "child-module";
test("react instance", () => {
expect(react).toBe(React); // serializes to the same string, but unequal
});

有没有办法在不出错的情况下使用来自一个Webpack模块的自定义React钩子？

我已经尝试过但没有成功

• 在我的Webpack配置文件中，我为React设置了外部声明，以避免React将包含在输出Webpack捆绑包中。

• 在子模块的package.json中，我已经将React声明为对等依赖项。

• 在父模块的package.json中，我链接到了子模块的React安装："react": "../child-module/node_modules/react"，以确保两个模块使用相同的React副本。

• 在运行时，我从CDN而不是任何Webpack模块交付React。然而，如果我不能测试我的React组件，这对我没有多大帮助。

Answer 1

我最终可以通过将React存储在子模块和父模块的公共根文件夹的node_modules文件夹中来解决这个问题。

我的项目结构：

project
|
+--- node_modules     <-- React is here
|
+--+ child-module
|  |
|  +--- node_modules  <-- Does NOT contain React
|
+--+ parent-module
|
+--- node_modules  <-- Does NOT contain React