Handling ES6 imports with jest using vue-cli and webpack template

[ghenry]

Version

1.0.0-beta.15

Reproduction link

https://forums.manning.com/posts/list/0/43203.page#p121739

Steps to reproduce

npm run unit using a SFC that has ES6 in it via an import

What is expected?

Unit test to pass

What is actually happening?

node_modules/vue-introjs/src/index.js:2
    import { DIRECTIVES } from './directives';
    ^^^^^^
    
    SyntaxError: Unexpected token import

      1 | import { shallow } from 'vue-test-utils'
      2 | import Dashboard from '@/components/Dashboard.vue'
    > 3 | import VueIntro from 'vue-introjs'
      4 | 
      5 | describe('Dashboard.vue', () => {
      6 |   it('should show the word Overview', () => {
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-cli/node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (test/unit/specs/Dashboard.spec.js:3:19)

[eddyerburgh]

The problem here is that you're importing the uncompiled files in vue-introjs. I'm not sure why, because I can't see your setup. You could fix this by setting babel to compile node_modules, although a better solution would be to set jest to use the main file (which it should by default, so I'm a bit confused)

However, this is not an issue with this library.

I see you linked to a post on my book forum, I'd like to help you if you're struggling with the book, but I don't recognise the code you posted. If you post a GitHub repository that reproduces your issue on the Testing Vue Applications forum I'll take a look for you

[Arseniy-II]

@ghenry, Hello!
Here is link how to solve similar pbolem ith vuew-awesome. Hope it will help :)