Vue.js 单元测试错误模块未找到

Question

我不明白 .. 为什么我的导入错误？ 这似乎是 webpack sourcemap 和 Karma w（它没有从 webpack 获取模块）之间的问题。 ??

我正在使用 karma-webpack (2.0.2) ...

这是我的项目结构

project
   src
      components
         ...
      ...
      vuex
         actions.js
         getters.js
         mutation_types.js
         mutations.js
         store.js
      App.vue
      main.js
      test
         unit
            specs
               vuex
                 mutations.spec.js

这是我的导入测试规范文件

// mutations.spec.js
import mutations from 'src/vuex/mutations'
import { ADD_SHOPPING_LIST } from 'src/vuex/mutation_types'
...

这是我的 package.json 脚本

"scripts": {
    ...
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    ...
  },

当我执行时：npm run unit

找不到模块

terminal
cd project
npm run unit

ERROR in ./test/unit/specs/vuex/mutations.spec.js
Module not found: Error: Can't resolve 'src/vuex/mutations' in '/Users/myself/Developments/project/test/unit/specs/vuex'

怎么了？与项目目录无关？

感谢反馈

更新

我尝试修改我的 karma.conf.js 如下：

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'],
    // files: ['./index.js'],  <=  initial setting
    files: [
      'specs/**/*.spec.js',
      './index.js'
    ],
    // preprocessors: {  <=  initial setting
    //   './index.js': ['webpack', 'sourcemap']
    // },
    preprocessors: {
      'specs/**/*.spec.js': ['webpack', 'sourcemap'],
      'src/**/*.js': ['webpack', 'sourcemap'],
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

现在 webpack 执行正确，但导入错误仍然存​​在

控制台

Yvess-Mac-mini:project myself$  npm run unit

> project@1.0.0 unit /Users/myself/Developments/project
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

Hash: 59e0b95047d40a9ddfd1
Version: webpack 2.7.0
Time: 3912ms
                       Asset     Size  Chunks                    Chunk Names
specs/vuex/mutations.spec.js  9.23 kB       0  [emitted]         specs/vuex/mutations.spec.js
                    index.js  1.28 MB    1, 0  [emitted]  [big]  index.js
chunk    {0} specs/vuex/mutations.spec.js (specs/vuex/mutations.spec.js) 891 bytes [entry]
    [0] ./test/unit/specs/vuex/mutations.spec.js 891 bytes {0} {1} [built]
chunk    {1} index.js (index.js) 491 kB [entry] [rendered]
    [0] ./test/unit/specs/vuex/mutations.spec.js 891 bytes {0} {1} [built]
    [8] ./~/vue/dist/vue.esm.js 268 kB {1} [built]
    [9] ./src/api/index.js 4.81 kB {1} [built]
   [10] ./src/vuex/actions.js 7.95 kB {1} [built]
   [11] ./src/vuex/mutations.js 2.41 kB {1} [built]
   [12] ./src/vuex/store.js 2.03 kB {1} [built]
   [14] ./src/components/AddItemComponent.vue 2.19 kB {1} [built]
   [16] ./src/components/ItemComponent.vue 2.17 kB {1} [built]
   [17] ./src/components/ItemsComponent.vue 2.17 kB {1} [built]
   [18] ./src/components/ShoppingListComponent.vue 2.21 kB {1} [built]
   [19] ./src/components/ShoppingListTitleComponent.vue 2.23 kB {1} [built]
   [26] ./src ^\.\/(?!main(\.js)?$) 920 bytes {1} [built]
   [27] ./test/unit/specs \.spec$ 186 bytes {1} [built]
   [28] ./test/unit/index.js 657 bytes {1} [built]
   [73] (webpack)/buildin/global.js 509 bytes {1} [built]
     + 60 hidden modules

ERROR in ./test/unit/specs/vuex/mutations.spec.js
Module not found: Error: Can't resolve 'mutations' in '/Users/myself/project/test/unit/specs/vuex'
 @ ./test/unit/specs/vuex/mutations.spec.js 3:17-37

ERROR in ./test/unit/specs/vuex/mutations.spec.js
Module not found: Error: Can't resolve 'mutation_types' in '/Users/myself/project/test/unit/specs/vuex'
 @ ./test/unit/specs/vuex/mutations.spec.js 7:22-47
 06 09 2017 13:38:28.742:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
 ...

Answer 1

我不应该在 .进口

import mutations from '@/vuex/mutations.js'
import { ADD_SHOPPING_LIST } from '@/vuex/mutation_types.js'

而是'@'（对于'@/omponents/..）

import mutations from '@/vuex/mutations.js'
import { ADD_SHOPPING_LIST } from '@/vuex/mutation_types.js'