Warning: React has detected a change in the order of Hooks called by Register when dipatching action to redux

Viewed 76

I have a test that dispatch action to redux and I am getting Warning: React has detected a change in the order of Hooks called by Register

     Previous render            Next render
 ------------------------------------------------------

  44. useLayoutEffect           useLayoutEffect
  45. useDebugValue             useDebugValue
  46. undefined                 useContext
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

My test:

it('should call dispatch with register and return error', async() => {
    fetch.mockImplementationOnce(() => Promise.resolve(new Response(JSON.stringify({username: 'Username is taken'}), {status: 422})));

    const wrapper = createWrapper();

    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
})

Creating wrapper:

const sagaMiddleware = createSaga();
const middleware = [...getDefaultMiddleware({thunk: false}), sagaMiddleware];

const store = configureStore({
    reducer: {
        authenticate,
    },
    middleware
});

sagaMiddleware.run(function*(){
    yield registerWatcher
});

const createWrapper = () => {
    return mount(
        <Provider store={store}>
            <Router>
                <Register />
            </Router>
        </Provider>
    )
}

Register:

const {isLoading, error} = useSelector(getRegisterRequest);
const dispatch = useDispatch();

const register = (e) => {
    e.preventDefault();
    dispatch(registerRequest(registerValues));
}

It works normally when submiting form from browser warning is given only in the test. Also context comes from redux internals I guess, I am not using context api in my code.

0 Answers
Related