Tests failing when importing components using absolute path

[afontcu]

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X] support request

Current behavior
Tests fail when absolute path import is used

Expected behavior
All tests to pass (as they do when I replace the absolute path with the relative equivalent one).

Minimal reproduction of the problem with instructions
Just running tests with some component import. Only when using relative paths the test is able to import them:

import Gradient from '@/components/Gradient'     <--- this does not work
import Gradient from 'src/components/Gradient'   <--- this does not work
import Gradient from '../components/Gradient'    <--- this does

Console output:

 FAIL  src/components/Background/background.test.js
  ● Test suite failed to run

    Cannot find module '@/components/Gradient' from 'Background.vue'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at src/components/Background/Background.vue:167:17
      at Object.<anonymous> (src/components/Background/Background.vue:210:3)

Obviously, my import Component from @/components/Whatever works properly in my app.

Just in case, my jest object config from package.json:

  "jest": {
    "moduleFileExtensions": ["js", "vue"],
    "moduleNameMapper": {
      "src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
      "^vue$": "vue/dist/vue.common.js",
      "src/([^\\.]*)$": "<rootDir>/src/$1.vue",
      "(.*)/(.*)$": "$1/$2.vue"
    },
    "snapshotSerializers": [
      "jest-serializer-html"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    }
  }

Tried adding a new line in ModuleNameMapper: "@/([^\\.]*)$": "<rootDir>/src/$1.vue", but did not work. I'm not sure if that even make sense :)

I'm using vue-cli, so in webpack.base.conf.js there's the @ alias setup:

...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  }

Please tell us about your environment:

• jest-vue-preprocessor: 1.0.1

• Node version : 8.1.2 (npm 5.3.0)

• Platform: OSX

Thanks for your time!

[afontcu]

I've seen issues where jest --debug output was requested, so here it goes just in case (where [removed] is Username/projectRootFolder):

{
  "config": {
    "automock": false,
    "browser": false,
    "cache": true,
    "cacheDirectory": "/var/folders/hg/g_zf05ys5cbdzk8m06zcy13c0000gn/T/jest_dx",
    "clearMocks": false,
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ],
    "globals": {},
    "haste": {
      "providesModuleNodeModules": []
    },
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "moduleNameMapper": [
      [
        "src/components/([^\\.]*)$",
        "/Users/[removed]/src/components/$1.vue"
      ],
      [
        "^vue$",
        "vue/dist/vue.common.js"
      ],
      [
        "src/([^\\.]*)$",
        "/Users/[removed]/src/$1.vue"
      ],
      [
        "(.*)/(.*)$",
        "$1/$2.vue"
      ]
    ],
    "modulePathIgnorePatterns": [],
    "name": "efafa39470c546c1dfd58eaa0ef88734",
    "resetMocks": false,
    "resetModules": false,
    "rootDir": "/Users/[removed]",
    "roots": [
      "/Users/[removed]"
    ],
    "setupFiles": [],
    "snapshotSerializers": [
      "/Users/[removed]/node_modules/jest-serializer-html/index.js"
    ],
    "testEnvironment": "jest-environment-jsdom",
    "testMatch": [
      "**/__tests__/**/*.js?(x)",
      "**/?(*.)(spec|test).js?(x)"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "testRegex": "",
    "testRunner": "/Users/[removed]/node_modules/jest-jasmine2/build/index.js",
    "testURL": "about:blank",
    "timers": "real",
    "transform": [
      [
        "^.+\\.js$",
        "/Users/[removed]/node_modules/babel-jest/build/index.js"
      ],
      [
        ".*\\.(vue)$",
        "/Users/[removed]/node_modules/jest-vue-preprocessor/index.js"
      ]
    ],
    "transformIgnorePatterns": [
      "/node_modules/"
    ]
  },
  "framework": "jasmine2",
  "globalConfig": {
    "bail": false,
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "expand": false,
    "mapCoverage": false,
    "noStackTrace": false,
    "notify": false,
    "projects": [
      "/Users/[removed]"
    ],
    "rootDir": "/Users/[removed]",
    "testPathPattern": "",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "20.0.4"
}

[psalaets]

I had a similar problem and solved it with these module name mappings. I don't think this issue is related to jest-vue-preprocessor, but rather your jest moduleNameMapper config.

"moduleNameMapper": {
  "^@/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
  "^@(.*)$": "<rootDir>/src$1",
  "^src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
  "^vue$": "vue/dist/vue.common.js"
}

These regexes probably aren't optimal but it worked for me.

[vire]

@psalaets I think you're right, I've used some default and didn't tested much other ways/paths how to import components.

This needs to be covered in tests and probably updated README so people are aware of the need to set properly moduleNameMapper

[afontcu]

Hi folks,

I manage to make it work by adding

"^@[/](.+)": "<rootDir>/src/$1",

I'm far from a regex expert so I'm not sure which one is the "most correct", but it worked for me. This is my final moduleNameMapper, just in case someone stumbles upon this thread:

"moduleNameMapper": {
    "^@[/](.+)": "<rootDir>/src/$1",
    "^components[/](.+)": "<rootDir>/src/components/$1",
    "src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
    "^vue$": "vue/dist/vue.common.js",
    "src/([^\\.]*)$": "<rootDir>/src/$1.vue",
    "(.*)/(.*)$": "$1/$2.vue"
},

"This needs to be covered in tests and probably updated README so people are aware of the need to set properly moduleNameMapper"

completely agree

[Tofandel]

That workaround is not viable if you have a mix of vue files and js files imported..
You need to add

  moduleFileExtensions: ['vue', 'js'],

To your jest config

And remove the .vue from the moduleNameMapper replaces