I'm facing an issue with my NuxtJS setup using Jest and Typescript. I can't seem to get my test to run properly due to an exception.
Details:
/home/xetra11/development/myapp/test/Navigation.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
My unit test is simple:
import { mount } from '@vue/test-utils'
import Navigation from '@/components/layout/Navigation.vue'
describe('navigation', () => {
test('is correct', () => {
const wrapper = mount(Navigation)
expect(wrapper.vm).toBeTruthy()
})
})
Below is my jest.config.js. I've included transformIgnorePatterns based on suggestions I found online:
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js'
},
moduleFileExtensions: [
'ts',
'js',
'vue',
'json'
],
transform: {
"^.+\\.ts$": "ts-jest",
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest'
},
transformIgnorePatterns: [
"node_modules/@vue/test-utils/dist/vue-test-utils.js",
],
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue'
]
}
Here's a snippet from my package.json:
"devDependencies": {
"@nuxt/types": "^2.15.3",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/vuetify": "^1.11.3",
"@vue/test-utils": "^1.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"jest": "^26.6.3",
"ts-jest": "^26.5.4",
"vue-jest": "^3.0.4"
}
Any insights on what might be causing this problem?