Cannot find module in my Nuxt 2 Typescript application: I`m getting error TS2307 when running my Jest tests

24 Views Asked by At

I have a Nuxt 2 Typescript application. Everything works well, except for the tests. All test with the .ts suffix fail. The error message looks like this:error TS2307: Cannot find module. It fails to find the components that are being imported into the tests. I have only test with a .js suffix. This is the only test where the imported components are found and that works. My package.json:

{
  "name": "my-nuxt-2-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "clearJestCache": "jest --clearCache"
  },
  "dependencies": {
    "axios": "0.19.2",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.24",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@types/jest": "29.5.12",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^29.1.2",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "ts-jest": "^29.0.3",
    "vue-jest": "^3.0.4"
  }
}

and my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@types/node",
      "jest"
    ]
  },
  "include": [
    "**/*.ts",
    "**/*.vue"
, "test/NuxtLogo.spec.js"  ],
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
} 

and my jest.config.js:

 module.exports = {
      moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1',
        '^~/(.*)$': '<rootDir>/$1',
        '^vue$': 'vue/dist/vue.common.js'
      },
      moduleFileExtensions: [
        'ts',
        'js',
        'vue',
        'json'
      ],
      transform: {
        '^.+\\.ts$': 'ts-jest',
        '^.+\\.js$': 'babel-jest',
        '.*\\.(vue)$': 'vue-jest'
      },
      collectCoverage: true,
      collectCoverageFrom: [
        '<rootDir>/components/**/*.vue',
        '<rootDir>/pages/**/*.vue'
      ],
      testEnvironment: 'jsdom',
      transformIgnorePatterns: [
        "/node_modules/(?!axios)"
      ]
    }

It is noticeable that jest can`t not only find '@/pages/personal-info/_id.vue' and "~/pages/inspire.vue", but also './../pages/about-me.vue'; enter image description here

enter image description here

0

There are 0 best solutions below