mercredi 24 juin 2020

how to test if component rerenders after state change for react hooks testing library

I'm using https://github.com/testing-library/react-hooks-testing-library to test my component but not sure how to check if my component has been re-rendered after a state change in this test

const { container, getAllByText, getAllByRole, queryByLabelText, getByText, getByLabelText } = renderNavBar(
    initialState,
    dispatchMock,
);

// get all divs
let divs = getAllByRole('div');
.
.
.

const { result, waitForNextUpdate } = renderHook(() => useReducer(Reducer, initialState));
const [ , dispatch ] = result.current;

act(() => {
    dispatch({ type: 'SET_ACTIVE_LINK', payload: 'about' });
    fireEvent.click(getByText('home'));
});


// get all divs after the state change,
divs = getAllByRole('div');  // <---- this still has the NavBar component with the old state

The state successfully updates after the dispatch/click event. I want to be able to get the component re-rendered with new state but it's still showing the original component with the previous state

Aucun commentaire:

Enregistrer un commentaire