Vitest is failing to resolve import of file that uses redux even when the function I'm testing doesn't have anything to do with redux

Question

Problem description

I have a Next.js (Typescript) project that uses redux and Vitest. The redux slices work without any issues (https://redux-toolkit.js.org/usage/usage-with-typescript) and Vitest also works perfectly for functions defined within files that don't use any Redux-related hook.

Nonetheless, when I add a test to a function located in a file that uses redux, Vitest will throw a "Failed to resolve import.....Does the file exist?" error, even when I try to test a function that don't have anything to do with the component nor redux.

Here is how I isolated the issue (I'm using In-source testing, but also tried placing the test in an independent foo.test.ts file with the same result):

DummyComponent.tsx

import { useAppDispatch } from 'store/hooks'
import { someAction } from 'store/some-slice/action

export default function DummyComponent() {
  const dispatch = useAppDispatch()
  const dummyAction = () => {
    dispatch(someAction())
  }
  return <button onClick={dummyAction}>Run action</button>;
}


// ↓↓↓ Function that will be tested ↓↓↓
function hasNothingToDoWithRedux(a: number, b: number) {
  return a + b;
}

if (import.meta.vitest) {
  const { describe, expect, it } = import.meta.vitest;
  describe("Testing hasNothingToDoWithRedux", () => {
    it("Sums two values correctly", () => {
      const a = 2;
      const b = 1;
      expect(hasNothingToDoWithRedux(a, b)).toBe(3);
    });
  });
}

When running yarn vitest, it will throw the "Error: Failed to resolve import.....Does the file exist?"

If I comment out dispatch(someAction()), the error will go away, the test will be run and pass, which makes me think it has something to do with how Vitest is being configured, but I have no idea what is happening 🤷🏻‍♂️

vite.config.ts:

import { defineConfig } from "vitest/config";

export default defineConfig({
  define: {
    "import.meta.vitest": "undefined",
  },
  test: {
    includeSource: ["./**/*.{js,ts,tsx}"],
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "types": ["vitest/importMeta"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

package.json

{
  "name": "shift-management",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.6",
    "luxon": "^3.0.4",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "react-redux": "^8.0.4",
    "react-transition-group": "^4.4.5",
    "sass": "^1.55.0"
  },
  "devDependencies": {
    "@types/luxon": "^3.0.2",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "@types/react-redux": "^7.1.24",
    "@types/react-transition-group": "^4.4.5",
    "@vitest/coverage-c8": "^0.25.3",
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.4",
    "vite": "^3.2.4",
    "vitest": "^0.25.3"
  }
}

Any idea how to fix this? Thanks.

Answer 1

I am running into something similar. In my search for an answer, I ran across this thread, and adding the tldr here.

Its possible vitest can't find the redux import due to dual package hazard. Something like this might help in your test: config inside of vite.config.js

   alias: [
      {
        find: "react-redux/es/exports",
        replacement: path.resolve(__dirname, "./node_modules/react-redux/lib/exports"),
      },
    ],

ymmv, as the paths might vary in your local env, but perhaps this might offer some clues to unblock you and/or future travelers