如何测试组件是否在 state 更改后重新呈现以用于 React Hooks 测试库

Question

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

Answer 1

await const divs = findAllByRole('div');

findAllBy is async and will wait to find it. findAll will throw an error if it doesn't find the value. https://testing-library.com/docs/react-testing-library/cheatsheet/