Vue packages version mismatch with @testing-library/vue

jest.config.js

module.exports = {
	moduleFileExtensions: ['js', 'vue'],
	transform: {
		'^.+\\.js$': 'babel-jest',
		'.*\\.vue$': 'vue-jest'
	},
	moduleNameMapper: {
		'^@/(.*)$': '<rootDir>/src/$1',
		'^tests/(.*)$': '<rootDir>/tests/$1'
	}
}

package.json

{
  "name": "",
  "version": "",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "body-parser": "^1.19.0",
    "core-js": "^3.8.3",
    "css-loader": "^5.0.1",
    "element-plus": "^1.0.1-beta.27",
    "postcss": "^8.2.4",
    "style-loader": "^2.0.0",
    "vue": "^3.0.5",
    "vue-router": "^4.0.3",
    "vue-template-compiler": "^2.6.12",
    "vuex": "^4.0.0-rc.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/vue": "^6.3.4",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "@vue/cli-plugin-babel": "^4.5.11",
    "@vue/cli-plugin-eslint": "^4.5.11",
    "@vue/cli-plugin-router": "^4.5.11",
    "@vue/cli-plugin-typescript": "^4.5.11",
    "@vue/cli-plugin-vuex": "^4.5.11",
    "@vue/cli-service": "^4.5.11",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.5.0",
    "jest": "^26.6.3",
    "prettier": "^2.2.1",
    "sass": "^1.32.5",
    "sass-loader": "^10.1.1",
    "typescript": "^4.1.3",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-jest": "^3.0.7"
  }
}

test.js

import '@testing-library/jest-dom'
import { render, fireEvent } from '@testing-library/vue'

import App from '../src/App.vue'

test('Whole App Navigation', async () => {
	const { getByTestId } = render(App)
})

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "strictNullChecks": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

you might need to update all vue related deps to their vue3 version. for instance, vue-template-compiler should go, and vue-jest should be on 5.0.0

All the other packages are on their Vue 3 version, but some packages needed the template-compiler still so had to keep that. I upgraded Vue-jest to 5.0.0 and it worked thanks!!