Quasar unit testing for vue3 - vue.js

Question

I am using quasar for developing a vue app. I am using vue 3.0.7. I have installed jest and created the jest.config File.
The jest config file contains the following:
clearMocks: true,
moduleFileExtensions: [
"js",
"jsx",
"ts",
"vue"
],
testMatch: [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[tj]s?(x)"
],
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
},
transformIgnorePatterns: [
"\\\\node_modules\\\\",
"\\.pnp\\.[^\\\\]+$"
],
I am writing the following test for a demo vue component:
import { shallowMount} from "#vue/test-utils"
import ComponentVueTest from "./ComponentVueTest"
describe('ComponentVueTest', ()=>{
test("Text shoudl be in the html" , () => {
let wrapper = shallowMount(ComponentVueTest);
expect(wrapper.html).toContain('JustTesting');
})
})
The component that is being tested:
<template>
JustTesting
</template>
<script>
import { defineComponent } from '#vue/composition-api'
export default defineComponent({
setup() {
},
})
</script>
<style>
</style>
and also the package.json dependencies:
"dependencies": {
"#quasar/extras": "^1.0.0",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"#vue/composition-api": "^1.0.6",
"cordova": "^10.0.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^2.6.14",
"vue-loader": "^16.5.0",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.13.14",
"#babel/preset-env": "^7.15.0",
"#quasar/app": "^3.0.0",
"#quasar/quasar-app-extension-testing": "^1.0.3",
"#quasar/quasar-app-extension-testing-unit-jest": "^2.2.2",
"#vue/test-utils": "^2.0.0-rc.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-vue": "^7.0.0",
"eslint-webpack-plugin": "^2.4.0",
"jest": "^27.0.6",
"vue-jest": "^3.0.7"
},
When i run the npm run test ("test": "npx jest") i get the following error:
FAIL src/__tests__/Demo.spec.js
● Test suite failed to run
TypeError: Vue.defineComponent is not a function
> 1 | import { shallowMount} from "#vue/test-utils"
| ^
2 | import ComponentVueTest from "./ComponentVueTest"
3 |
4 | describe('ComponentVueTest', ()=>{
at Object.<anonymous> (node_modules/#vue/test-utils/dist/vue-test-utils.cjs.js:7856:26)
at Object.<anonymous> (src/__tests__/Demo.spec.js:1:1)
I have been trying for hours to fix it and can't seem to understand what is wrong

Answer 1

Try changing:
import { defineComponent } from '#vue/composition-api' to
import { defineComponent } from 'vue'
Also looks like you need to change your wrapper.html to wrapper.text() and add toMatch rather than toContain, that said the following should work:
import { shallowMount} from "#vue/test-utils"
import ComponentVueTest from "./ComponentVueTest"
describe('ComponentVueTest', ()=>{
test("Text should be in the html" , () => {
let wrapper = shallowMount(ComponentVueTest);
expect(wrapper.text()).toMatch('JustTesting');
})
})

Answer 2

The solution to unit testing vue3 in quasar v2 is to use #quasar/quasar-app-extension-testing-unit-jest. Just install it with
quasar ext add #quasar/quasar-app-extension-testing-unit-jest
and it should set up everything for you. Notice it is still in alpha and some components are not fully working yet(for me QPage wasn't working).
Hope this helps somebody :)