Reputation: 221
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.
Upvotes: 22
Views: 19795
Reputation: 91
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.
"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)
"scripts": { "test": "jest" },
And for me its now working. Hope it can help somebody else.
Upvotes: 9
Reputation: 3640
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.
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.
Upvotes: 5
Reputation: 3620
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.
Upvotes: 18
Reputation: 194
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.
Upvotes: 11