How to mock redux for react-component/unit tests in cypress

[JohnHuynh]

I am using the @cypress/react package to perform unit-testing on react components.

In my case, these react components contain external influence such as services or redux state management.

I tried to stub these external components with cy.stub() but I get an error that I don't know how to work around.

Example:

I have a component that invokes useSelector from redux in order to get the current state currentState. It looks like the following:

import { currentStateSelector } from 'store/current-state/selectors';

export default function MyComponent() {
const currentState = useSelector(currentStateSelector);
return (
    currentState !== null ?
            <div data-testid='my-component'>
                 { currentState.name }
            </div>
    :
    <></>
);
}

In order to test this I created the following spec file:

import React from 'react';
import mount from '@cypress/react/dist';
import MyComponent from './my-component';
import * as reactRedux from 'react-redux';
import { store } from '../../store';

describe('MyComponent',() => {
        it('renders', () => {
        const useSelectorMock = cy.stub(reactRedux, 'useSelector');
        const currentState = {
            name: 'test',
        };
        useSelectorMock.returns(currentState);
        mount(
            <reactRedux.Provider store={store}>
                <MyComponent/>
            </reactRedux.Provider>
        );
        cy.get('[data-testid=my-component]').should('exist');
    });
});

Running the test with npx cypress open it gives me an AssertionError:

Timed out retrying after 4000ms: Expected to find element: [data-testid=my-component], but never found it.
Apparently, the element that I tried to stub returns a null value, which is why this AssertionError occured. But how do I resolve this?

Maybe I have not understood the stubbing functionality fully yet, but after days of research I haven't found anything helpful. Any help would be much appreciated.

[glomotion]

i'm also slamming against this. :( if you ever find a way to do this, i'd love to hear it!!

I suspect that cypress might not actually be capable of doing this, as i believe it uses sinon for it's stubbing, and sinon has no control of module imports (see this ticket: sinonjs/sinon#1711)

here's the link to my (related) discussion thread
#15064

[glomotion]

@bahmutov would you agree with that ☝️ assumption?

[glomotion]

we're running on a babel/webpack base... so im thinking of tinkering with this to see if i cant get es6 modules mocked that way instead of using cy.stub().

https://github.com/speedskater/babel-plugin-rewire

[JohnHuynh]

Yea, it seems like it just doesn't work with sinon. Furthermore, it is still "experimentalTesting" as far as I know, so it is not advanced as integration testing/E2E testing. I switched to jest for now for component testing :/.