Open monkemedia opened 2 years ago
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:
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')
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')
}
}
}
}
Run your test
I haven't tested.
If you run into any problem, just let me know.
I would glad to help.
Sadly this didn't work for me. Still getting the same error
@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
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"
}
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')
}
}
}
}
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!
You are a star. My vue-jest was below version 4. Thank you for you help :)
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,
},
},
the above is not working for me on nuxt
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
propertyCan I assume I will need to update the transform property?