2

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.

UPDATE

I switched to the test framework jest and the mocking works by writing the following before describe(...):

jest.mock('react-redux', () => ({
    useSelector: jest.fn( () => { return 'desired return-object' })
}));
OhJohnny
  • 183
  • 2
  • 10
  • 1
    Im also stuck on this little ditty! trying to replicate the awesomeness that jest can do. Im sure it's possible, just cant seem to make it work. – glo Feb 11 '21 at 02:58
  • Yes, thank you I tried it with jest and it worked! Even though setting up jest was tedious work (because of babel and jest configurations), the mocking possibilities with jest are pretty convenient. Do you need any help on this? – OhJohnny Feb 11 '21 at 08:06
  • Yeah we're still trying to persevere with cypress import stubbing. It seems to be reliant upon this babel transform: @babel/plugin-transform-modules-commonjs – glo Feb 11 '21 at 08:33
  • just posted a question then: https://stackoverflow.com/questions/66151947/how-to-stub-react-redux-usereducer-hook-using-cypress – glo Feb 11 '21 at 09:27
  • I thought you were using jest, unfortunately I can't help how stubbing in cypress :/ – OhJohnny Feb 11 '21 at 09:39

0 Answers0