eddyerburgh / vue-test-utils-jest-example Goto Github PK

After much Googling I'm coming up short on how to test a Vue plugin using Jest without getting the rather annoying warning log:

You are running Vue in development mode.

I've searched an searched on how to disable/mute/appease this and the only solution I have found that works is to set NODE_ENV to "production" before running jest:

"test": "cross-env NODE_ENV=production jest"

Since jest sets NODE_ENV to "test" by default, I'm not sure if this has any side effects or not?
Either way, it feels a little wrong to me.

As a really simple test case, let's say I have a plugin that looks like this:

// plugin.js
export default {
  install(Vue, options) {
    Vue.prototype.$upper = (text) => text.toUpperCase()
  }
}

...then if I wanted to test this plugin, my test file might look something like this:

// plugin.spec.js
import Vue from 'vue'
import VueUpper from './plugin'

it('adds an $upper method to the Vue prototype', () => {
  expect(Vue.prototype.$upper).toBeUndefined()
  Vue.use(VueUpper)
  expect(typeof Vue.prototype.$upper).toBe('function')
})

it('transforms a string to upper case', () => {
  expect(Vue.prototype.$upper('foo')).toBe('FOO')
})

Any help would be very much appreciated!

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

I also tried the current official unit test usage with karma/mocha/phantomjs in vuejs-tempaltes/webpack, it didn't work neither: vuejs/vue-loader#195 (comment)).

Thanks for your awesome work btw!

steps to reproduce

• git clone https://github.com/eddyerburgh/vue-test-utils-jest-example.git
• cd vue-test-utils-jest-example
• yarn
• yarn unit

expected behavior

test pass

actual behavior

yarn unit
yarn unit v0.23.4
$ jest 
 PASS  test/specs/Message.spec.js
 FAIL  test/specs/List.spec.js
  ● Test suite failed to run

    Couldn't find preset "es2015" relative to directory "/Volumes/DevelopOnly/Github/vue-test-utils-jest-example"
      
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
          at Array.map (<anonymous>)

 FAIL  test/specs/MessageToggle.spec.js
  ● Test suite failed to run

    Couldn't find preset "es2015" relative to directory "/Volumes/DevelopOnly/Github/vue-test-utils-jest-example"
      
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
          at Array.map (<anonymous>)

Test Suites: 2 failed, 1 passed, 3 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.532s
Ran all test suites.
error Command failed with exit code 1.

description

same with npm install && npm run unit

• OS version: macOS 10.12.6
• yarn version: v0.23.4
• node version: v8.4.0
• npm version: 5.3.0