How to mock a dispatch made in a useState?

Question

I have a component that displays a skeleton when a status is "idle", and dispatch a request with react-redux to get data.

I am writing the test file for this component, and I want to render the skeleton to test if it is rendered properly.

The problem is that my mocked store is on status "idle", so the render make the dispatch, and then I get error : Unknown Error: Error: Error: connect ECONNREFUSED 127.0.0.1:443.

How can I avoid the dispatch to avoid the query in the test ?

Here is the component simplified :

export default function MyComponent() {
    const dispatch = useAppDispatch();

    [...]

    useEffect(() => {
        if ("idle" === status) {
            // my query

            dispatch(fetchData(query));
        }
    }, [dispatch]);

    if ("idle" === status) {
        return <MyComponentSkeleton />;
    }

Here is the test :

describe("MyComponent component", () => {
    let store: ReturnType<typeof createMockStore>;

    it("renders correctly when status is IDLE", () => {
        store = createMockStore();

        render(
            <Provider store={store}>
                <MyComponent />
            </Provider>
        );

        const skeletonElement = screen.getByTestId("my-component-skeleton");
        expect(skeletonElement).toBeInTheDocument();
    });

Answer 1

Found a solution :

Added store.dispatch = vi.fn() (you can use jest).