CODEWITHSUNDEEP
node.jsunit-testingvue.js
user762579
user762579

Reputation:

Vue.js unit tests error Module not found

I don't get it .. why my import is wrong ? it seems to be an issue between webpack sourcemap and Karma w(it doesn't get the modules from webpack) . ??

I am using karma-webpack (2.0.2) ...

here is my project structure

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

Here is my test spec file w the imports

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

here is my package.json script

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

when I execute: npm run unit

I get MOdule not found

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'

what's wrong ? isn't relative to the project directory ?

thanks for feedback

UPDATE

I tried to modify my karma.conf.js as following :

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' }
      ]
    }
  })
}

Now webpack executing correctly , but the import error remains

console

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

> [email protected] 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/
 ...

Upvotes: 1

Views: 1246

Answers (1)

user762579
user762579

Reputation:

I should not use 'sr/..' in . the import 

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

but rather '@' (as for '@/omponents/..)

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

Upvotes: 0

Related Questions