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.