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

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
...