how to stub or spy react-redux useDispatch/useReducer hooks when using cypress/react

[glomotion]

Im trying to pitch that our dev team purely use cypress/react instead of jest/jsdom for component unit testing. The one big roadblock standing in the way of this right now tho, is being able to match jest's excellent import mocking functionality.

could someone please help me understand how to stub (or even spy on) the useReducer hook imported from react-redux? This code looks like it should work, but it just doesn't (stub never intercepts the useReducer function).

import React from 'react';
import { mount } from '@cypress/react';
import * as ReactReduxModule from 'react-redux';
const { Provider } = ReactReduxModule;

import { Button } from './button';
import { store } from './store';
import * as SomethingModule from './something';

describe('<Button />', () => {
  it('uses stubbed things', () => {
    cy.stub(ReactReduxModule, 'useSelector')
      .as('useSelector')
      .returns({ moo: 'woof' });
    cy.spy(ReactReduxModule, 'useDispatch')
      .as('useDispatch')
    cy.stub(SomethingModule, 'something').as('something').returns('scary!!');

    cy.get('@something').should('not.have.been.called'); 
    cy.get('@useSelector').should('not.have.been.called'); 

    mount(
      <Provider store={store}>
        <Button />
      </Provider>,
    );
    // cy.contains('moo: woof scary').should('exist');
    cy.get('@something').should('have.been.called'); // passes
    cy.get('@useSelector').should('have.been.called'); // fails! :(
  });
});

the "something" stub does indeed trigger and intercept the import, but the useSelector stub does not. :(

help

the component in question is SUPER simple too:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { something } from './something';
import { StoreState } from './store';

export const Button = ({}) => {
  const { moo } = useSelector((store: StoreState) => {
    return { moo: store.moo };
  });
  const dispatch = useDispatch();
  return (
    <button onClick={dispatch({ })}>
      moo: {moo} {something()}
    </button>
  );
};

[glomotion]

ofcourse, when using jest, you can simply do something like this:

const mockUseDispatch = jest.fn();
jest.mock('react-redux', () => ({
  ...(jest.requireActual('react-redux') as any),
  useSelector: jest.fn(),
  useDispatch: () => mockUseDispatch,
}));
const mockUseSelector = useSelector as jest.Mock;

it(`should render loading UI, while we fetch the asset's details`, () => {
    mockUseSelector.mockReturnValue({
      ...basicState, // mocked state here
    });
   ...
});

To openly embrace @cypress/react - i think we're really going to need to be able to do similar.

[aagranovExtend]

Has there been any progress on this?

[Fewwy]

Any updates?

[jordanpowell88]

I have an idea for a solution for this. Ill let you know if I'm able to make any progress

[hamidmayeli]

Any update @jordanpowell88?

[jordanpowell88]

Unfortunately, no. I have not had a chance to work on examples for these as I've been pretty heads down on some other initiatives. I hate to be the bearer of bad news but wanted to at least get you a response.

[SparksFlyx3]

My team is also working on migrating our Jest unit tests to Cypress component tests.. But this is a real bummer..

[kolarovski-andrej]

Not sure if this helps OP, but this is the first thread that comes in the results so I'll leave an answer here in case it helps someone else.

I managed to indirectly spy on useDispatch by importing my actual application store into Cypress and spying on store.dispatch.
So, in your tests you import your store from wherever you declare and set it up:

import { Provider } from 'react-redux';
import store from 'src/app/state/store';

cy.mount(<Provider store={store}><Component {...props}/></Provider>);

and then in your specs:
cy.spy(store, 'dispatch')

In my use case, I needed to spy whether a component calls dispatch with a correct action, in a unit test. An obvious drawback to this solution is that it's much more complicated to configure the state to what you need for that particular test scenario - you can't just pass a mock state as you would do otherwise. I wouldn't use this approach in e2e tests, though, I'd rather rely on the effects of the dispatched action (new UI element appearing, API call being made etc.)

[sadie100]

I attempted to stub the Redux dispatch function in various ways, but none were successful. Instead, I used Redux middleware to mock functions, which allowed me to achieve the intended result.
The middleware code looks like this:

const isCypressTest = () => window.Cypress && window.Cypress.env("runStub");

const cypressTestMiddleware = store => next => action => {
  if (!isCypressTest()) {
    return next(action);
  }

  switch (action.type) {
    case ACTION_TRYING_TO_MOCK:
      // write mocking state logic
      return;
    default:
      return next(action);
  }
};

export default cypressTestMiddleware;

The isCypressTest function returns true only when Cypress is running and the 'runStub' Cypress environment variable is set. By setting Cypress.env('runStub', 'true') in the test code, the Redux actions specified in the middleware are mocked according to the written logic. (Or maybe you can refine the environment variables and specify stubbed logics for each variable)