How to set initial state value for useState Hook in jest and enzyme?

Question

I know this question is already asked here: How to set initial state for useState Hook in jest and enzyme?

const [state, setState] = useState([]);

And I totally agree with Jimmy's Answer to mock the useState function from test file but I have some extended version of this question, "What if I have multiple useState statements into the hooks, How can I test them and assign the respective custom values to them?"

I have some JSX rendering with the condition of hook's state values and depending on the values of that state the JSX is rendering.

How Can I test those JSX by getting them into the wrapper of my test case code?

Answer 1

Upon the answer you linked, you can return different values for each call of a mock function:

let myMock = jest.fn();

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

In my opinion this is still brittle. You may modify the component and add another state later, and you would get confusing results.

Another way to test a React component is to test it like a user would by clicking things and setting values on inputs. This would fire the event handlers of the component, and React would update the state just as in real configuration. You may not be able to do shallow rendering though, or you may need to mock the child components.

If you prefer shallow rendering, maybe read initial state values from props like this:

function FooComponent({initialStateValue}) {
  const [state, setState] = useState(initialStateValue ?? []);
}