时间戳

首页 > 解决方案 > 在多模块项目中使用自定义 React Hook 进行 Jest 测试时出错

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

问题描述

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

我的示例钩子非常简单：

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

但是，当在模块外部的 React 组件中使用我的自定义钩子时，我收到一个错误：

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

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

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

import {react} from "child-module";

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

有没有办法在另一个 Webpack 模块中使用自定义 React 钩子而不会出错？

我已经尝试过的没有任何成功

标签： javascriptreactjstypescriptwebpackreact-hooks

解决方案

我终于可以通过将 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

推荐阅读