Cannot find module './src/components/Message' from 'MessageToggle.vue'

[tsauvajon]

If I use an alias to resolve my components path e.g. import Message from '@/components/Message' instead of import Message from ./Message, my tests fail.

Cannot find module './src/components/Message' from 'MessageToggle.vue'

I can temporarly use relative paths instead of @/, but using aliases is extremely convenient for me and my team ...

[defnorep]

Yeah this seems to be blocking me from adopting Jest.

[eddyerburgh]

You can use aliases in Jest.

Checkout this Jest config, it maps @ to src:

https://github.com/vuejs/vue-test-utils-jest-example/blob/master/package.json#L39

More info — https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string

[tsauvajon]

It doesn't work for me.

My package.json jest config already contains

"moduleNameMapper": {
  "^@/(.*)$": "<rootDir>/src/$1"
}

You can reproduce within this repository, just change import Message from './Message' to import Message from '@/components/Message' in MessageToggle.vue.

It resolves to ./src (relative to the component), instead of [application root]/src (relative to the package.json). In other words it fails to resolve <rootDir>.

[eddyerburgh]

That's strange, it works correctly for me in the vue-test-utils-jest-example.

What are your details (OS, node version, npm version)

[freakyfanny]

I have the same problem.

[freakyfanny]

Node 9.2.1
Npm 5.6.0
MACOS Sierra

[eddyerburgh]

@freakyfanny with a clean install?

[freakyfanny]

yes

[tsauvajon]

I migrated my project to a more recent vue-cli webpack template, due to 2 issues (the current one and this one with vue-jest, probably not related).

I can now import with the @ alias without problem.

[freakyfanny]

I can 2 now. 😀thanks anyway Med vänlig hälsning Fanny Petersson Sällberg

…

On 18 Dec 2017, at 21:07, Thomas Sauvajon ***@***.***> wrote: I migrated my project to a more recent vue-cli webpack template, due to 2 issues (the current one and this one with vue-jest). I can now import with the @ alias without problem. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Gomah]

Had a similar issue as I was using babel-plugin-module-resolver.

// jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  moduleDirectories: ['node_modules'],
  setupTestFrameworkScriptFile: 'mock-local-storage',
  moduleNameMapper: {
    '^.+\\.(jpg|jpeg)$': 'jest-static-stubs/jpg',
    '^.+\\.(png)$': 'jest-static-stubs/png',
    '^.+\\.(svg)$': 'identity-obj-proxy',
    '@/(.*)': '<rootDir>/client/$1',
    '~/(.*)': '<rootDir>/client/$1',
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  setupFiles: ['./client/plugins/components.js'],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
};

.babelrc

{
  "env": {
    "test": {
      "presets": ["env"],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-object-rest-spread",
        "dynamic-import-node",
        [
          "module-resolver",
          {
            "root": ["./"],
            "alias": {
              "@": "./client/",
              "~": "./client/"
            }
          }
        ]
      ]
    }
  }
}

Removing the module-resolver configuration fixed the problem for me, it was probably clashing with jest's moduleNameMapper.

{
  "env": {
    "test": {
      "presets": ["env"],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-object-rest-spread",
        "dynamic-import-node",
      ]
    }
  }
}