vue test utils TypeError: Cannot destructure property `config` of 'undefined' or 'null'

Question

I'm doing just simple unit test with vue test utils. but It's not working. I've no clue.... help me

I installed this things.....

> $ npm i -D jest @vue/test-utils vue-jest jest-serializer-vue babel-jest babel-core@bridge

> $ npm i -D @babel/core @babel/preset-env

I made jest.config.js file

module.exports = {
  moduleFileExtensions: [
    'vue',
    'js'
  ],

  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },

  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist'
  ],

  testURL: 'http://localhost',

  transform: {
    '^.+\\.vue$' : 'vue-jest',
    '^.+\\.jsx?$' : 'babel-jest'
  }
}

and tests/Parent.test.js

import { mount } from '@vue/test-utils'
import Parent from './Parent.vue'

test('Mount', () => {
  const wrapper = mount(Parent)
  expect(wrapper.html()).toBe('')
})

but npm run test:unit error like this

 FAIL  tests/Parent.test.js
  ● Test suite failed to run

    TypeError: Cannot destructure property `config` of 'undefined' or 'null'.

      at Object.getCacheKey (node_modules/vue-jest/lib/index.js:10:5)
      at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:280:41)
      at ScriptTransformer._getFileCachePath (node_modules/@jest/transform/build/ScriptTransformer.js:351:27)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:588:32)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:758:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:815:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.512 s
Ran all test suites.

N'Bayramberdiyev · Accepted Answer · 2021-09-05 17:27:09Z

18

The package is moving away from semantic versioning to support a variety of Vue versions (2.x, 3.x) and Jest versions (26.x, 27.x). So, if you're using Vue 3.x and Jest 27.x, you need to install vue3-jest, not vue-jest.

npm i vue3-jest -D

# or

yarn add vue3-jest --dev

Then, update your jest.config.js as follows:

module.exports = {
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx'],
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue3-jest',
    '^.+\\js$': 'babel-jest',
  },
}

By the time of writing this answer, the package naming & versioning was like so:

You can read more about the new naming & versioning strategy here.

answered Sep 5, 2021 at 17:27

N'Bayramberdiyev

3,6509 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

browncoatcoder · Accepted Answer · 2021-07-01 16:34:23Z

11

If you're using version 27 of jest, try downgrading to version 26. Make sure to downgrade babel-jest and ts-jest as well to version 26. I was getting the following error and that did it for me:

Cannot destructure property 'config' of 'undefined' as it is undefined.

answered Jul 1, 2021 at 16:34

browncoatcoder

1941 silver badge6 bronze badges

5 Comments

jfunk Over a year ago

This was a nice clue, for me, I was using Jest 27, but I needed to update it's companion babel-jest to 27 as well, since it was still at 24. After I updated it started working.

browncoatcoder Over a year ago

@jfunk glad it helped

Andrew Bogdanov Over a year ago

I have "babel-jest": "^27.0.6", "jest": "^27.0.6", "ts-jest": "^27.0.4", but still it doesn't work

vincentp Over a year ago

Works for me thanks. Downgrading to "ts-jest": "26.5.6", "jest": "^26.6.3"

Ali Ghafoori Over a year ago

Great. Thanks, @AndrewBogdanov. downgraded and worked for me

duncan · Accepted Answer · 2024-09-02 15:32:15Z

Was facing same issues trying to make Vue3, Jest and Typescript working tohgether. This how i managed to make it work. Its a matter off aligning the planets with dependencies.

First i suggest to clean package.json from any jest mentionning dependency (specialy if like me you spend few days trying to put and remove dependencies while performing a Rain dance holding a horseshoe).
add to package.json

"devDependencies": { 
    "@babel/core": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "babel-core": "^7.0.0-bridge.0",
    "typescript": "^4.3.5",
    "@vue/test-utils": "^2.0.0-rc.9",
    "jest": "^26.5.6",
    "ts-jest": "^26.5.6",
    "babel-jest": "^26.5.6",
    "vue-jest": "^5.0.0-alpha.10",
    "@vue/cli-plugin-unit-jest": "5.0.0-beta.2"
  }

(make sure that this depencies have the same version: jest, ts-jest and babel-jest)

still in package.json add script "scripts": { "test": "jest" },
npm i
npm run test

And for me its now working. Hope it can help somebody else.

DanKodi · Accepted Answer · 2022-01-19 02:09:41Z

6

If you upgraded Jest to 27.x.x, you will get this error and maybe other issues depending on your setup. I had issues after upgrading to Jest 27 with my Vue3/TS/Jest setup.

Upgrade all jest related packages. I had to upgrade jest, jest-junit, ts-jest packages
Add the proper vue-jest. Chances are you will have to remove existing vue-jest package and install the correct package. I had to use @vue/vue3-jest. Use the below table to choose the correct package

Or read here https://github.com/vuejs/vue-jest

Fix jest configuration

transform: { "^.+\.js$": "babel-jest", ".*\.(vue)$": "@vue/vue3-jest" }

For reference, here's my devDependencies.

answered Jan 19, 2022 at 2:09

DanKodi

3,70031 silver badges27 bronze badges

1 Comment

Bence Szalai Over a year ago

Editing the transform in jest.config.js to use @vue/vue3-jest was the key to me. The version table was also very useful to confirm the versions I have installed, and to make me realize that from vue-jest and @vue/vue*-jest packages only one is needed at a time.

Collectives™ on Stack Overflow

vue test utils TypeError: Cannot destructure property `config` of 'undefined' or 'null'

4 Answers 4

Comments

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related