Ошибка при использовании Custom React Hook в многомодульном проекте для тестов с Jest - PullRequest
Новая
       12

Ошибка при использовании Custom React Hook в многомодульном проекте для тестов с Jest

1 голос
/ 25 марта 2020

У меня есть проект с несколькими модулями Webpack. В моем дочернем модуле я хочу создать пользовательский хук React, который я могу использовать в компонентах React в родительском модуле.

Мой пример хука довольно прост: 

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

Однако, при использовании моего пользовательского перехвата в компоненте React вне модуля я получаю ошибку:

Ошибка: недопустимый вызов перехвата. Хуки могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

  1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)
  2. Возможно, вы нарушаете правила хуков
  3. Возможно, в одном приложении может быть несколько копий React

Я предполагаю, что причина в том, что экземпляр React создается для каждого модуля Webpack. Jest-тест, сравнивающий экземпляр React дочернего модуля с экземпляром родительского модуля, также показывает это. 

import {react} from "child-module";

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

В любом случае можно ли использовать настраиваемый обработчик React из одного модуля Webpack в другом без получения ошибки ?

То, что я уже пытался безуспешно

  • В моих файлах конфигурации Webpack я установил внешние объявления для React, чтобы избежать того, что React будет быть включенным в выходные пакеты Webpack.

  • В пакете. json дочернего модуля я объявил React зависимостью равноправного узла.

  • В пакете. json родительского модуля я связался с установкой React дочернего модуля: "react": "../child-module/node_modules/react", чтобы оба модуля использовали одну и ту же копию React.

  • Во время выполнения я заставляю его работать с доставкой React из CDN, а не из любого модуля Webpack. Однако мне не очень помогает, если я не могу протестировать свои компоненты React.

1 Ответ

0 голосов
/ 26 марта 2020

Я мог бы наконец решить проблему, сохранив React в папке node_modules общей папки root дочернего и родительского модуля.

Структура моего проекта: 

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