如何修复在 mocking 调度时有条件地调用 useDispatch REACT 挂钩

Question

Error Message: React Hook "useDispatch" is called conditionally. React Hooks must be called in the exact same order in every component render

I've been trying to figure out how to fix this for days, but nothing seeems to work. The component works when I don't mock anything, but as soon as I mock dispatch it gives me this error.

Here's my component:

import { Stage } from "../Stage/Stage";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { retrieveStageList } from "../../modules/reducer";
import { Process } from "../Process/Process";

export function RenderProcess({
  _useSelector = useSelector,
  _useDispatch = useDispatch(), //this is where it breaks
  _Process = Process,
}) {
  const dispatch = _useDispatch();
  const process = _useSelector((state) => state.renderProcess);
  const stageList = _useSelector((state) => state.stageList);
  useEffect(() => {
    if (process.processId !== null)
      dispatch(retrieveStageList(process.processId));
  }, []);

  return (
    <>
      <_Process process={process} />
      {stageList?.map((stageInputs, processId) => {
        return (
          <div key={processId}>
            <Stage stage={stageInputs} />
          </div>
        );
      })}
    </>
  );
}

Here's my test for this component:

import { render } from "@testing-library/react";
import { RenderProcess } from "./RenderProcess";

test("should call dispatch once.", () => {
  const _useSelector = (fn) =>
    fn({
      stageList: [],
      renderProcess: { processId: "309624b6-9c96-4ba7-8f7e-78831614f685" },
    });
  
  const dispatch = jest.fn();
  render(
    <RenderProcess
      _useSelector={_useSelector}
      _useDispatch={() => dispatch}
      _Process={() => {}}
    />
  );
  expect(dispatch).toHaveBeenCalledTimes(1);
});

Any help on this would be amazing.

Answer 1

Found the fix, in the properties being passed in RenderProcess- on this

• line: _useDispatch = useDispatch()
• it should be: _useDispatch = useDispatch