Jest+vue: "Cannot find module ....vue"

Question

I'm really just trying to have a skeleton of a jest+vue for my library and quickly get this error. I know the structure is not the usual jest structure, I here try to describe one test with an auxiliary control.

Here is the content of my test folder: arrays.specs.ts and arrays.vue

Here is the config:

module.exports = {
  moduleFileExtensions: [
    "js",
    "ts",
    "vue"
  ],
  roots: [
    "<rootDir>/test"
  ],
  testEnvironment: "jest-environment-jsdom",
  testMatch: [
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  transform: {
    ".*\\.(vue)$": "vue-jest",
    ".*\\.(ts)$": "ts-jest"
  },
};

I have installed these 3 packages: @vue/test-utils, ts-jest and vue-jest

Now, with this, I still end up with this error when running jest:

    test/arrays.spec.ts:4:20 - error TS2307: Cannot find module './arrays.vue'.

    import Arrays from './arrays.vue'

I really don't see what I am missing.

Answer 1

You might be missing a 'shim' file. Place this in your 'src' directory:

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Answer 2

If the error Cannot find module issue in vue jest testing occures, set the preset property of jest.config.js file as below.

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  testEnvironment: 'node'
}

Answer 3

In my case, the problem was that the file shims-vue.d.ts was in the root directory of the project. I had to move it to ./src in order to be able to load .vue modules.