I have a vue application with single file components and i want to add unit tests to test the components. I'm trying to use jest like described here but i keep getting the error Jest encountered an unexpected token with the following details:
/some_path/MyRecipe.vue:1
<template>
^
SyntaxError: Unexpected token <
1 | import { shallowMount } from @vue/test-utils
> 2 | import MyRecipe from ../src/components/MyRecipe.vue
| ^
3 |
4 | describe('MyRecipe', () => {
5 | test('is a Vue instance', () => {
at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
at Object.<anonymous> (__tests__/MyRecipe.test.js:2:1)
After some research (e.g. from here) I gather that this is probably due to jest expecting a .js file, but the .vue single file components have html, javascript and css in them, usually dealt with by webpack and vue-loader. I've tried to follow jest configurations from various tutorials to make jest use vue-jest to transform .vue files, but the error persists. This is my package.json file (unnecessary parts removed):
{
name: all-recipes ,
version: 0.1.0,
private: true,
scripts: {
// ...
test: jest
},
dependencies: {
// ...
core-js: ^3.4.3,
vue: ^2.6.10
// ...
},
devDependencies: {
@vue/cli-plugin-babel: ^4.1.0,
@vue/cli-plugin-eslint: ^4.1.0,
@vue/cli-service: ^4.1.0,
@vue/test-utils: ^1.0.3,
babel-core: ^7.0.0-bridge.0,
babel-eslint: ^10.0.3,
babel-jest: ^26.0.1,
// ...
jest: ^26.0.1,
jest-serializer-vue: ^2.0.2,
vue-jest: ^3.0.5,
vue-template-compiler: ^2.6.10,
vue-test-utils: ^1.0.0-beta.11
},
// ...
jest: {
moduleFileExtensions: [
js,
json,
vue
],
transform: {
.*\.,(vue)$: vue-jest,
^.+\.js$: babel-jest
},
snapshotSerializers: [
jest-serializer-vue
]
}
}
Any idea what might be wrong, or some tips on how to debug this?
EDIT: I have looked into this question and I don't believe the answer there would solve my problem since what I am trying to import is a .vue file and not an .html file.
EDIT 2: I have a feeling that jest is somehow just not picking up the transforms, because removing them from package.json doesn't change anything.
EDIT 3: No, jest is correctly using vue-jest for transforming. If I uninstall vue-jest and try running the test again, jest complains that vue-jest is missing.
