jest ReferenceError: Vue is not defined - vue.js

We are introducing Jest to an existing project.
However, I wrote an example test code.
The above error occurred.
ReferenceError: Vue is not defined
1 | import User from "../components/modal/ad/AdAdd";
> 2 | import { mount } from "#vue/test-utils";
| ^
3 |
4 | describe("user component", () => {
5 | let wrapper;
How can I solve this??
//User.test.js
import User from "../components/modal/ad/AdAdd";
import { mount } from "#vue/test-utils";
describe("user component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(User);
});
test("render", () => {
expect(wrapper.vm.oSid).toBe(0);
});
});
export default {
data() {
return {
Sid: 0,
deleteList: [],
};
},
//package.json
"dependencies": {
"eslint-plugin-jest": "^26.2.2",
"vue": "^2.6.11",
"vuetify": "^2.4.0",
"vuex": "^3.4.0",
},
"devDependencies": {
"#babel/core": "^7.18.0",
"#babel/preset-env": "^7.18.0",
"#types/jest": "^27.5.1",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "^3.0.5",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^2.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^28.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0",
"speed-measure-webpack-plugin": "^1.5.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-cli-plugin-vuetify": "~2.4.0",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
I just mounted it, but it says the view is undefined. I don't know how to solve it.
What's wrong??
I haven't been able to solve the above error for several days.
I want to solve it.
Any help would be appreciated.

I had the same error with vue3 and jest v.28, what solved it was to add
testEnvironmentOptions: {
customExportConditions: ["node", "node-addons"],
},
into jest.config.js.

You are using Vue version 2 with #vue/test-utils 2.0.0 which is for Vue version 3.
You can find the correct #vue/test-utils version for Vue 2 here

Related

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

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

vue-template-loader breaks vuetify components

I'm using vue-template-loader to load html files in .ts files using decorators, before I use it vuetify was working fine, but after I installed it I got these error messages
[Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Basically: it says that vuetify is not in your app
vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
// Locals
import ar from 'vuetify/src/locale/ar';
import en from 'vuetify/src/locale/en';
Vue.use(Vuetify);
export default new Vuetify({
rtl: true,
lang: {
locales: { ar, en },
current: 'ar',
}
});
vue.config.js
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: ['vuetify'],
configureWebpack: {
module: {
rules: [
{
test: /.html$/,
loader: 'vue-template-loader',
exclude: /index.html/,
},
],
}
},
});
package.json
{
"dependencies": {
"core-js": "^3.8.3",
"moment": "^2.29.3",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.27.1",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-pwa": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-typescript": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "~4.5.5",
"vue-cli-plugin-vuetify": "~2.5.0",
"vue-template-loader": "^1.1.0",
"vuetify-loader": "^1.7.0"
}
}

Jest Nuxt Cannot read property 'child' of undefined

I have a problem with fire the Jest tests for the Nuxt/Vue components. Last day i connected all that need for test, and had resolve many errors with jsdom and babel issues, but can't resolve problem with Vue component.
The error is
TypeError: Cannot read property 'child' of undefined
4 | describe('Компонент Counter', () => {
5 | test("renders properly", () => {
> 6 | const wrapper = shallowMount(Greeting); // or mount - it's doesn't metter
| ^
7 | console.log(wrapper);
8 | });
9 |
My comoponent Greeting
<template>
<div> Hello World! </div>
</template>
<script>
export default {
name: 'Greeting'
};
</script>
My Greeting.spec.js
import {mount, shallowMount} from '#vue/test-utils';
import Greeting from '../../components/Greeting.vue';
require('jsdom-global')();
describe('Компонент Counter', () => {
test("renders properly", () => {
const wrapper = shallowMount(Greeting);
console.log(wrapper);
});
});
jest.config.js
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
preset: "#nuxt/test-utils",
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "#vue/vue2-jest"
},
};
package.json
"scripts": {
"test": "jest"
},
"devDependencies": {
"#nuxt/test-utils": "^0.2.2",
"#types/jest": "^27.0.3",
"#vue/cli-plugin-babel": "^4.5.15",
"#vue/test-utils": "^1.3.0",
"#vue/vue2-jest": "^27.0.0-alpha.4",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^27.4.5",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"jest": "^27.4.5",
"jsdom-global": "^3.0.2",
"node-sass": "^4.7.2",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^6.0.7",
"ts-jest": "^27.1.2",
"vue": "^2.6.14",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.14",
"vueify": "^9.4.1"
}
So the answer is that Jest have an attribute for working with JSDOM and i don't need an additional requires.
i just add in jest.config.js single line in the bottom
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
preset: "#nuxt/test-utils",
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "#vue/vue2-jest"
},
testEnvironment: 'jsdom'
};

TypeError: webdriverio_1.default is not a function - Percy2 and WebdriverIO7

I get this error using webdriverio v7 and latest Percy for visual testing:
[0-2] Error in "0: I can see page "Product Detail Page of the last product""
TypeError: webdriverio_1.default is not a function
at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:45
at Browser.call (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\webdriverio\build\commands\browser\call.js:43:16)
at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:105:34)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:100:24)
at Browser.wrapCommandFn (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:67:44)
at World.<anonymous> (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:13)
at World.executeSync (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\index.js:38:22)
at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\index.js:69:68
It doesn't even get to percy, so there is no screenshot there.
All I do in the code is taking screenshot of the page:
import percySnapshot from '#percy/webdriverio';
import { Then } from '#cucumber/cucumber';
Then(/^I can see page "([^"]*)"$/, (name: string) => {
browser.waitForPageToLoad();
browser.call(() => percySnapshot(name));
});
This is my package.json file:
"devDependencies": {
"#cucumber/cucumber": "^7.1.0",
"#percy/cli": "^1.0.0-beta.48",
"#percy/webdriverio": "^2.0.0",
"#types/chai": "^4.2.16",
"#types/node": "^14.14.41",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"allure-commandline": "^2.13.8",
"app-root-path": "^3.0.0",
"chai": "^4.3.4",
"eslint": "^7.24.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.2.4",
"webdriverio": "^7.4.6"
},
"dependencies": {
"#wdio/allure-reporter": "^7.4.2",
"#wdio/cli": "^7.4.6",
"#wdio/cucumber-framework": "^7.4.6",
"#wdio/local-runner": "^7.4.6",
"#wdio/selenium-standalone-service": "^7.4.2",
"#wdio/spec-reporter": "^7.4.3",
"#wdio/sync": "^7.4.6"
}
Note:
This used to work prior upgrading to webdriverIO v7 and percy v2.
Anybody has an idea how to solve it?
Thanks!
Discussed here github
I needed to add in tsconfig.json file these options:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,

Vuetify error: Unknown custom element: <v-app-bar> - did you register the component correctly?

When i normal start my app (npm run serve) it's all right. But when i want start Unit testing with Jest, the console gives me an error:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Can someone help me?
plugins/vuetify.ts
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json
"dependencies": {
"#vue/composition-api": "^1.0.0-rc.5",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vuetify": "^2.4.0",
"webpack": "^4.45.0",
"webpack-assets-manifest": "^4.0.1"
},
"devDependencies": {
"#mdi/font": "^5.9.55",
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-jest": "^4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^1.0.3",
"eslint": "^6.7.2",
"eslint-formatter-gitlab": "^2.2.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0-beta.4",
"node-sass": "^4.12.0",
"prettier": "^2.2.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
Probably you aren't creating a correct Vue instance in your unit test. Take a look at vuetify website, there is a section about unit testing where they explain how to add vuetify to a localVue instance
I think that i creating Vue instance correctly, i don't see error.
top-filter.spec.ts:
import TopFilter from '#/layout/TopFilter.vue'
import Vuetify from 'vuetify'
import { shallowMount, Wrapper, createLocalVue } from '#vue/test-utils'
import Vue from 'vue'
describe('topFilter.vue', () => {
let vuetify: Vuetify, wrapper: Wrapper<Vue>
beforeEach(() => {
const localVue = createLocalVue()
vuetify = new Vuetify()
wrapper = shallowMount(TopFilter, {
localVue,
vuetify
})
})
it('renders', () => {
expect(wrapper.exists()).toBe(true)
})
})