Currently Im using functional component with react hooks. But I'm unable to test the useState
hook completely. Consider a scenario like, in useEffect
hook I'm doing an API call and setting value in the useState
. For jest/enzyme I have mocked data to test but I'm unable to set initial state value for useState
in jest.
const [state, setState] = useState([]);
I want to set initial state as array of object in jest. I could not find any setState function as similar like class component.
To set a conditional initial value for useState in React:Pass a function to the useState hook. Use a condition to determine the correct initial value for the state variable. The function will only be invoked on the initial render.
To update the state, call the state updater function with the new state setState(newState) . Alternatively, if you need to update the state based on the previous state, supply a callback function setState(prevState => newState) .
If you want to set initial state after loading data (fetch data from api) you can use "useEffect" in React hooks. it is equal to "componentWillReceiveProps" in class component. so when you set state value in useEffect make sure avoid infinity loop eg ..
You can mock React.useState
to return a different initial state in your tests:
// Cache original functionality const realUseState = React.useState // Stub the initial state const stubInitialState = ['stub data'] // Mock useState before rendering your component jest .spyOn(React, 'useState') .mockImplementationOnce(() => realUseState(stubInitialState))
Reference: https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
First, you cannot use destructuring in your component. For example, you cannot use:
import React, { useState } from 'react'; const [myState, setMyState] = useState();
Instead, you have to use:
import React from 'react' const [myState, setMyState] = React.useState();
Then in your test.js
file:
test('useState mock', () => { const myInitialState = 'My Initial State' React.useState = jest.fn().mockReturnValue([myInitialState, {}]) const wrapper = shallow(<MyComponent />) // initial state is set and you can now test your component }
If you use useState hook multiple times in your component:
// in MyComponent.js import React from 'react' const [myFirstState, setMyFirstState] = React.useState(); const [mySecondState, setMySecondState] = React.useState(); // in MyComponent.test.js test('useState mock', () => { const initialStateForFirstUseStateCall = 'My First Initial State' const initialStateForSecondUseStateCall = 'My Second Initial State' React.useState = jest.fn() .mockReturnValueOnce([initialStateForFirstUseStateCall, {}]) .mockReturnValueOnce([initialStateForSecondUseStateCall, {}]) const wrapper = shallow(<MyComponent />) // initial states are set and you can now test your component } // actually testing of many `useEffect` calls sequentially as shown // above makes your test fragile. I would recommend to use // `useReducer` instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With