Warning: Cannot update a component (TestComponent) while rendering a different component (TestComponent).

[budarin]

When writing tests, I encountered the react error
Warning: Cannot update a component (TestComponent) while rendering a different component (TestComponent).

Stacktrace

 ● Console

    console.error
      Warning: Cannot update a component (`TestComponent`) while rendering a different component (`TestComponent`). To locate the bad setState() call inside `TestComponent`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render  
          at hook (D:\Projects\zustand-clean-architecture\src\app\selectors\__tests__\utils\TestComponent.tsx:7:50)

      13 |
      14 |     newState.navigationFilter = filter;
    > 15 |     useTodoStore.setState(newState);
         |                  ^
      16 |
      17 |     return {
      18 |         result: filter,

      at console.error (node_modules/@testing-library/react-hooks/lib/core/console.js:19:7)
      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnAboutRenderPhaseUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:27492:15)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25498:5)
      at forceStoreRerender (node_modules/react-dom/cjs/react-dom.development.js:16977:5)
      at handleStoreChange (node_modules/react-dom/cjs/react-dom.development.js:16953:7)
      at node_modules/zustand/vanilla.js:12:16
          at Set.forEach (<anonymous>)
      at Function.setState (node_modules/zustand/vanilla.js:11:17)
      at setState (src/domain/store/navigationFilter/setNavigationFilter.ts:15:18)
      at hook (src/app/selectors/__tests__/getTodoListByNavFilter.test.tsx:48:44)
      at hook (src/app/selectors/__tests__/utils/TestComponent.tsx:8:5)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at updateFunctionComponent (node_modules/react-dom/cjs/react-dom.development.js:19588:20)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21601:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25738:74)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at Object.<anonymous> (src/app/selectors/__tests__/getTodoListByNavFilter.test.tsx:44:12)

I don't understand what the problem may be.
The code in the tests is valid - no frills
The stack says that the error occurs when Set.forEach in vanilla.js

Here is the repository to see

[dbritto-dev]

@budarin if you want to test a hook you need to use renderHook

[budarin]

try to use renderHook

const { result } = renderHook(() => {
  setNavigationFilter(createFilterNavigationFilter(inboxKey, navigationFilters[inboxKey]));
  return getTodoListViewProps();
});

and get the error:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

[budarin]

the problem was in using wrong library
testing-library/react-hooks-testing-library#826 (comment)

it is necessary to use
import { renderHook } from '@testing-library/react';
instead of
import { renderHook } from '@testing-library/react-hooks';

[dbritto-dev]

the problem was in using wrong library
testing-library/react-hooks-testing-library#826 (comment)

it is necessary to use
import { renderHook } from '@testing-library/react';
instead of
import { renderHook } from '@testing-library/react-hooks';

@budarin yes, from react 18 you need to use renderHook from @testing-library/react