Components cannot find react-redux context value

[Joshua-Thornton-software-dev]

Hello all,
This is my first time posting something like this, so please bear with me. I am attempting to add Cypress to my React/Typescript project for unit testing. It uses Redux in pretty much the entire project, so I need components that I mount for unit tests to have access to the store (a new store for each mount).
I have followed the documentation here to the letter, and then tried many different changes when that did not work. I can run component tests on fresh components that do not need to access the store, but components that do need access to the store give me the same error every time:

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

Here is my simple component test (using Cypress v10):

// cypress/component/HomePage.cy.tsx

/// <reference types="cypress" />

import HomePage from "../../src/containers/HomePage";

describe('HomePage.cy.ts', () => {
  it('should be visible', () => {
    cy.mount(<HomePage />).should("be.visible");
  })
})

Here is the commands support file:

// cypress/support/commands.tsx

/// <reference types="cypress" />

import { mount } from "cypress/react";
import { Provider } from "react-redux";
import { getStore } from "../../src/redux/store";

Cypress.Commands.add('mount', (component: React.ReactNode, options = {}) => {
    // Use defailt store if none are provided.
    const { reduxStore = getStore(), ...mountOptions } = options;

    const wrappedComponent = <Provider store={reduxStore}><>{component}</></Provider>;
    return mount(wrappedComponent, mountOptions);
});

The type file:

// cypress.d.ts

import { MountOptions, MountReturn } from "cypress/react";
import { EnhancedStore } from "@reduxjs/toolkit";
import { RootState } from "./src/redux/store";

declare global {
    namespace Cypress {
        interface Chainable {
            /**
             * Mounts a React Component
             * @param component the React node to mount
             * @param options Additional options to pass into mount
             */
            mount(
                component: React.ReactNode,
                options?: MountOptions & { reduxStore?: EnhancedStore<RootState> }
            ): Cypress.Chainable<MountReturn>
        }
    }
}

The Redux store file:

// src/redux/store.ts

import {applyMiddleware, createStore} from 'redux';
import {composeWithDevTools} from "redux-devtools-extension";
import {main_reducer} from "./reducers";
import thunk from "redux-thunk";
import {TypedUseSelectorHook, useDispatch, useSelector} from "react-redux";
import { configureStore } from '@reduxjs/toolkit';

export const create_store = () => createStore(main_reducer, composeWithDevTools(applyMiddleware(thunk)));

export const getStore = () => configureStore({
    reducer: main_reducer,
    enhancers: [composeWithDevTools(applyMiddleware(thunk))]
})

export const store = create_store();

// These are types autogenerated for our store:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// @ts-ignore
window.store = store;

And the parts of my package.json I can share:

{
  "homepage": "./",
  "license": "",
  "private": true,
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "cypress:CT" : "cypress open --component",
    "lint": "npx eslint . --ext js,jsx,ts,tsx"
  },
  "dependencies": {
    "@babel/plugin-transform-typescript": "^7.12.13",
    "@babel/preset-typescript": "^7.12.13",
    "@craco/craco": "^6.1.1",
    "@emotion/css": "~11.7.1",
    "@hot-loader/react-dom": "^17.0.1",
    "@kunukn/react-collapse": "^2.0.11",
    "@mapbox/vector-tile": "^1.3.1",
    "@nearlab/ffice-data": "1.1.4",
    "@nearlab/nav-services": "1.0.1",
    "@nearlab/ts-optsetchain": "0.0.5",
    "@reduxjs/toolkit": "^1.5.0",
    "@sweetalert2/theme-dark": "~5.0.8",
    "@types/cesium": "^1.67.13",
    "@types/minio": "~7.0.11",
    "@types/pbf": "^3.0.1",
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.16",
    "@types/redux-logger": "^3.0.7",
    "@types/sha256": "^0.2.0",
    "@types/styled-components": "^5.1.20",
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "aws-sdk": "^2.1061.0",
    "cesium": "^1.78.0",
    "craco-cesium": "^1.2.0",
    "craco-plugin-react-hot-reload": "^0.1.0",
    "eslint-config-react-app": "^7.0.0",
    "graphql": "~15.5.0",
    "json5": "^2.1.0",
    "minio": "~7.0.25",
    "node-sass": "^7.0.1",
    "pbf": "^3.2.0",
    "process": "^0.11.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-redux": "^7.2.2",
    "react-scripts": "^4.0.0",
    "react-tooltip": "^4.2.13",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "resium": "^1.2.1",
    "rxjs": "^7.5.2",
    "rxjs-hooks": "^0.7.0",
    "sass": "^1.32.6",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
    "sha256": "^0.2.0",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.3",
    "sweetalert2": "^11.3.5",
    "sweetalert2-react-content": "^4.2.0",
    "typeface-roboto": "^1.1.13",
    "typescript": "^4.5.4",
    "ws": "^7.4.3"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-syntax-flow": "^7.14.5",
    "@babel/plugin-transform-react-jsx": "^7.14.9",
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.0.10",
    "@types/cacheable-request": "^6.0.2",
    "@types/jest": "^27.4.0",
    "auto-changelog": "^2.2.1",
    "babel-loader": "^8.2.5",
    "cypress": "^10.1.0",
    "eslint": "^8",
    "jest": "^27.4.0",
    "release-it": "^14.12.1"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Thank you for any help you can provide. Please let me know if there is anything else I should provide.

[Joshua-Thornton-software-dev]

I found the answer myself, and honestly I feel quite silly.
I had been defining a new mount, globally accessible via cy.mount, that would properly wrap the component in a redux provider.
But somehow (and I am still not sure how because I have since started over), I was also creating another cy.mount elsewhere, because I got it to work now and I am sure that the problem was that I was calling the wrong mount. I was able to determine this in my new attempt by changing the name of the mount I was creating to reduxMount so I could properly track which mount I was using.

[younusrahman2022]

add some screenshot. not clear at all

[antonio-costa]

A month later but I was having a similar issue:

Notice line 44 overrides the previously defined mount command... It feels silly so I assume it was the same issue. Just deleted that line and it started working fine.

[alexlop29]

Saved me debugging time!

Helpful Resource: Cypress Doc - Custom Mount Redux