Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

[KenAdams-AK]

Describe the bug

Despite the component being wrapped into Provider with created store, it still keeps getting Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>.
As you can see from the log screenshot, the store is being created correctly but still, Provider can not get its value, and in the node_modules/react-redux/es/hooks/useReduxContext file the contexValue is getting null instead.

import { describe, test } from "vitest";
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { Provider } from "react-redux";
import App from "../src/App";
import { createReduxStore } from "../src/redux/store";
import ErrorBoundary from "../src/components/ErrorBoundary";

describe("App component", () => {
  test("renders correctly", () => {
    const store = createReduxStore();
    console.log({ store });

    const component = (
      <Provider store={store}>
        <MemoryRouter>
          <App />
        </MemoryRouter>
      </Provider>
    );

    render(component);
    const mainContainer = screen.getByRole("main");
    expect(mainContainer).toBeInTheDocument();
  });

  test("renders with Error", () => {
    const store = createReduxStore();
    const component = (
      <ErrorBoundary>
        <Provider store={store}>
          <MemoryRouter>
            <App />
          </MemoryRouter>
        </Provider>
      </ErrorBoundary>
    );

    render(component);
    const errorElement = screen.getByRole("heading");
    expect(errorElement).toBeInTheDocument();
  });
});

Reproduction

Here is the Link to the repo with minimal reproduction:

1. git clone https://github.com/KenAdams777/vitest-dev-issue-3287.git
2. npm install
3. npm run test

System Info

OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 8.05 GB / 15.24 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.68)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @KenAdams777. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[sheremet-va]

@testing-library/react doesn't bundle ESM build, so it references CJS redux, but your code references ESM entry point of the same package. This is called a "dual package hazard".

Try to point your react-redux import to CJS module with test.alias option.

[KenAdams-AK]

@testing-library/react doesn't bundle ESM build, so it references CJS redux, but your code references ESM entry point of the same package. This is called a "dual package hazard".

Try to point your react-redux import to CJS module with test.alias option.

Thanks, it worked for me.
For those who struggle with the same dual package hazard issue using @testing-library/react, here is the solution that worked for me, just add alias to the tests configure file as shown below:

vite.config.ts

/* eslint-disable import/no-extraneous-dependencies */

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./tests/setupTests.ts"],
    alias: [
      {
        find: "react-redux/es/exports",
        replacement: path.resolve(__dirname, "./node_modules/react-redux/lib/exports"),
      },
    ],
    coverage: {
      provider: "c8",
      reportsDirectory: "./tests/_coverage",
    },
  },
});