Discussion on: Mocking redux useSelector-hook

[Sergey Dubovik]

Paste your code here

[Sergei]

...
import { userListSelector } from "@/redux/user/user.selector";

jest.mock("react-redux", () => {
  const actualReactRedux = jest.requireActual("react-redux");
  return {
    ...actualReactRedux,
    useSelector: jest.fn(),
  };
});

jest.mock("@/redux/user/user.selector", () => {
  const actualUserSelectors = jest.requireActual("@/redux/user/user.selector");
  return {
    ...actualUserSelectors,
    userListSelector: jest.fn(),
  };
});

describe("Render Component", () => {
  beforeEach(() => {
    documentBody = render(
      <Component />,
      undefined,
      [reduxUser()] // this is dynamic module wrapper
    );
    (useSelector as jest.MockedFunction<typeof useSelector>).mockImplementation((selector: any) => {
      return selector();
    });

    (userListSelector as jest.MockedFunction<typeof userListSelector>).mockReturnValue({
      loading: false,
      users: createMockList<UserType>(3),
    });
  });

  afterEach(() => {
    cleanup();
  });

  test("Should render ProfileTable", () => {
    expect(documentBody.getByTestId(TestId.Component)).toBeInTheDocument();
  });
});

And I get Cannot destructure property 'users' of 'react_redux_1.useSelector(...)' as it is undefined. error from component