Cannot find module './src/components/Message' from 'MessageToggle.vue' about vue-test-utils-jest-example HOT 11 CLOSED

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

from vue-test-utils-jest-example.

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>.

from vue-test-utils-jest-example.

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",
      ]
    }
  }
}

from vue-test-utils-jest-example.

Yeah this seems to be blocking me from adopting Jest.

from vue-test-utils-jest-example.

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

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

from vue-test-utils-jest-example.

I have the same problem.

from vue-test-utils-jest-example.

Node 9.2.1
Npm 5.6.0
MACOS Sierra

from vue-test-utils-jest-example.

@freakyfanny with a clean install?

from vue-test-utils-jest-example.

yes

from vue-test-utils-jest-example.

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.

from vue-test-utils-jest-example.

from vue-test-utils-jest-example.