The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Gavin Henry (7) [Avatar] Offline
#1
Hi,

I'm on page 49 and can't get a SFC to load correctly. I get this without an import statement:

> jest --config test/unit/jest.conf.js --coverage

 PASS  test/unit/specs/sanity_check.spec.js
 FAIL  test/unit/specs/Dashboard.spec.js
  ? Console

    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: this.$intro is not a function


so I add this to my test from main.js:

import VueIntro from 'vue-introjs'


Test is now:

import { shallow } from 'vue-test-utils'
import Dashboard from '@/components/Dashboard.vue'
import VueIntro from 'vue-introjs'

describe('Dashboard.vue', () => {
  it('should show the word Overview', () => {
    const wrapper = shallow(Dashboard)
    expect(wrapper.text()).toContain('Overview')
  })
})


and I get:


> jest --config test/unit/jest.conf.js --coverage

 FAIL  test/unit/specs/Dashboard.spec.js
  ? Test suite failed to run

    /home/ghenry/src/App/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)


so I'm guessing the import is not transformed by Jest.

Any tips here? I'd like to just import my SFC and Jest figures the rest out.


Edd Yerburgh (42) [Avatar] Offline
#2
Hi Gavin, the code you posted is not from this book, but it looks like the code is not being compiled by Jest.

Can you post a repository with the full setup? That way I can debug the code for you.

I'd be interested in what information I can add to the book to teach you how to compile with Jest smilie.
Gavin Henry (7) [Avatar] Offline
#3
Will do.
574651 (4) [Avatar] Offline
#4
It's the same problem as posted in the chrome debugger thread.

It would be cool, if you could add a little disclaimer at the beginning of the book as it seems, that I am not the only one, who likes to setup the examples themself, instead of using provided code skeletons.

Edd Yerburgh (42) [Avatar] Offline
#5
What kind of disclaimer would you like me to add?

In the latest edits to the manuscript I added a callout about using vue-cli to setup test compilation, is that the kind of information you would find useful?