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.

nrako · Accepted Answer · 2023-07-07 19:07:57Z

-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

answered Jul 7, 2023 at 19:07

nrako

3,01922 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

evanjmg Feb 25 at 9:19

need more information here on how this fixes etc

Collectives™ on Stack Overflow

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

Problem description

DummyComponent.tsx

vite.config.ts:

tsconfig.json

package.json

Any idea how to fix this? Thanks.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem description

DummyComponent.tsx

vite.config.ts:

tsconfig.json

package.json

Any idea how to fix this? Thanks.

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related