[Resolved Question] vue-jest usage

[monkemedia]

Optional chaining works greats in my Nuxt application, however, when I run my Jest unit tests, I get the following error message:

Jest encountered an unexpected token

In my jest.config.js file I have the following in my transform property

 transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },

Can I assume I will need to update the transform property?

[JuniorTour]

You may need to add compiler: require('vue-template-babel-compiler') to your jest.config.js

According to vue-jest Doc, the step may be:

1. Find or create your jest.config.js If you are using .json config, you need to replace .json config with jest.config.js, so that we can use programmatic configuration to require('vue-template-babel-compiler')

2. Add require('vue-template-babel-compiler') as globals.['vue-jest'].templateCompiler.compiler value:

// jest.config.js
module.exports = {
  globals: {
    'vue-jest': {
      templateCompiler: {
         compiler: require('vue-template-babel-compiler')
      }
    }
  }
}

3. Run your test

I haven't tested.

If you run into any problem, just let me know.

I would glad to help.

[monkemedia]

Sadly this didn't work for me. Still getting the same error

[JuniorTour]

@monkemedia It will work for vue-jest >= 4.0.0 && jest <= 26.6.3

I just test by feat: add jest test example from vue-template-babel-compiler-nuxt-project

Config

Nuxt.js && vue-jest DEMO project

1. Package Version:

• Only work for vue-jest >= 4.0.0. (vue-jest<= 3.9.9 need upgrade, can't use customized compiler.)

// package.json
  "devDependencies": {
    "@vue/test-utils": "^1.2.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "vue-jest": "4.0.1",
    "vue-template-babel-compiler": "^1.0.3"
  }

2. jest.config.js

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  globals: {
    'vue-jest': {
      templateCompiler: {
        compiler: require('vue-template-babel-compiler')
      }
    }
  }
}

3. test.spec.js

import { mount } from '@vue/test-utils'
import Tutorial from '@/components/Tutorial.vue'

describe('jest test with vue-template-babel-compiler', () => {
  test('should work for Optional Chaining', () => {
    const wrapper = mount(Tutorial)
    expect(wrapper.vm).toBeTruthy()
    expect(wrapper.vm.$el.innerHTML).toMatch('Optional Chaining enabled: true')
  })
})

Thank you for your feedback!

[monkemedia]

You are a star. My vue-jest was below version 4. Thank you for you help :)

[vip30]

I found that using functional components in jest will cause error as without the config transformAssetUrls: true, filename will not pass to compiler See here

Here is the full config

    'vue-jest': {
      templateCompiler: {
        compiler: require('vue-template-babel-compiler'),
        transformAssetUrls: true,
      },
    },

[ashley00101010]

the above is not working for me on nuxt