How to mock each selectors return value? jest

Question

I have already tried different approaches to mocking selectors, but they always show undefined when I try to log them in the actual component. I have tried some of the suggested ways to achieve it, but some were just a bit far from my objective.

Expected values for loading in Main.tsx should be boolean

Somebody knows how to achieve this? Related links: Is there a way to properly..., useSelector of Undefined,

Main.test.tsx

import * as accountingSelectors from 'src/redux/limited/accounting/user/selectors';

jest.mock('src/redux/limited/accounting/user/selectors');

describe('...', () => {
    beforeEach(() => {
        jest.spyOn(accountingSelectors, 'fetchingSelector').mockReturnValue(true);
    });
});

Main.tsx

const Main = () => {
  const loading = useSelector(fetchingSelector);

  // always return "undefined" here when I run the test.
  console.log('line 42 ~ Main ~ loading', loading); 
  
  ...
});

selectors.ts

export const fetchingSelector = createSelector(
  (state) => state,
  ({ data }) => {
    return data.fetching;
  }
);

How to mock each selectors return value? jest

0 Answers0