TypeError: Cannot read properties of undefined (reading 'extend') - vuejs2

Question

I using Jest 27.5.1 with TypeScript.
When I try to test, I got these error:
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'extend')
2 | <div>Hello</div>
3 | </template>
> 4 |
| ^
5 | <script lang="ts">
6 | import Vue from 'vue'
7 | export default Vue.extend({
at src/pages/test.vue:4:1
at Object.<anonymous> (src/pages/test.vue:347:3)
at Object.<anonymous> (test/test.spec.ts:4:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
files
test file(TypeScript):
import Vuetify from 'vuetify'
import { mount, createLocalVue } from '#vue/test-utils'
import test from '~/src/pages/test.vue'
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
beforeEach(() => {
vuetify = new Vuetify()
})
test('is a Vue instance', () => {
const wrapper = mount(test, {
vuetify,
localVue,
})
expect(wrapper.vm).toBeTruthy()
})
})
jest.config.js:
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',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/src/components/**/*.vue',
'<rootDir>/src/pages/**/*.vue',
],
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['./test/setup.js'],
moduleDirectories: [__dirname, 'node_modules']
}
setup.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json:
"dependencies": {
"#babel/core": "^7.19.3",
"#nuxtjs/axios": "^5.13.6",
"consola": "^2.15.3",
"core-js": "^3.19.3",
"dotenv": "^16.0.2",
"eslint": "^8.22.0",
"eslint-plugin-import": "^2.26.0",
"nuxt": "^2.15.8",
"nuxt-typed-vuex": "^0.3.1",
"ts-loader": "8.2.0",
"typed-vuex": "^0.3.1",
"typescript": "^4.8.4",
"vue": "^2.7.10",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.10",
"vuex": "3.6.2",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.5",
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/eslint-config-typescript": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/stylelint-module": "^4.1.0",
"#nuxtjs/vuetify": "^1.12.3",
"#types/jest": "^27.5.2",
"#types/node": "^18.7.18",
"#typescript-eslint/eslint-plugin": "^5.35.1",
"#typescript-eslint/parser": "^5.35.1",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.5.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^8.2.0",
"husky": "^8.0.1",
"jest": "^27.5.1",
"lint-staged": "^12.1.7",
"postcss-html": "^1.3.1",
"prettier": "^2.7.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"ts-jest": "^27.1.5",
"vue-jest": "^3.0.7"
}
What do I have to do to run the test correctly?
I don't know how to solve this problem myself, as it worked fine when I ran the same code in other environments.
Thank you for your help.

Answer 1

Mh seems the Vue instance cannot be reached. I'm also using vuetify with jest test and it look quite same. Also same as in the documentation by vuetify here https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests
The only difference I see is that the createLocalVue() initialization is outside of describe() in your case.
Try it like
describe('Index', () => {
let vuetify: Vuetify
const localVue = createLocalVue()
...
Instead of
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
...