Component register error with Jest testing

manubi

I am trying to get my testing to run. But I am getting this error:

console.error
  [Vue warn]: Unknown custom element: <q-page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

"dependencies": {
  "@ag-grid-community/vue": "^24.0.0",
  "@ag-grid-enterprise/all-modules": "^24.0.0",
  "@quasar/extras": "^1.9.9",
  "apollo-cache-inmemory": "^1.6.6",
  "apollo-client": "^2.6.10",
  "apollo-link": "^1.2.14",
  "apollo-link-http": "^1.5.17",
  "apollo-upload-client": "^14.1.2",
  "axios": "^0.20.0",
  "core-js": "^3.6.5",
  "graphql": "^15.3.0",
  "graphql-tag": "^2.11.0",
  "quasar": "^1.14.1",
  "subscriptions-transport-ws": "^0.9.18",
  "vue": "^2.6.12",
  "vue-apollo": "^3.0.4",
  "vue-class-component": "^7.2.6",
  "vue-matomo": "^3.14.0-0",
  "vue-plotly": "^1.1.0",
  "vue-property-decorator": "^8.0.0",
  "vue-router": "^3.4.6",
  "vuex": "^3.5.1"
},
"devDependencies": {
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/vue": "^5.1.0",
  "@types/jest": "^26.0.15",
  "@typescript-eslint/eslint-plugin": "^4.4.1",
  "@typescript-eslint/parser": "^4.4.1",
  "@vue/cli-plugin-babel": "~4.5.7",
  "@vue/cli-plugin-eslint": "~4.5.7",
  "@vue/cli-plugin-router": "~4.5.7",
  "@vue/cli-plugin-typescript": "~4.5.7",
  "@vue/cli-plugin-vuex": "~4.5.7",
  "@vue/cli-service": "~4.5.7",
  "@vue/eslint-config-prettier": "^6.0.0",
  "@vue/eslint-config-typescript": "^7.0.0",
  "@vue/test-utils": "^1.1.0",
  "babel-core": "^7.0.0-bridge.0",
  "babel-plugin-transform-imports": "2.0.0",
  "compression-webpack-plugin": "^6.0.3",
  "eslint": "^6.8.0",
  "eslint-plugin-prettier": "^3.1.4",
  "eslint-plugin-vue": "^7.0.1",
  "jest": "^26.6.0",
  "node-sass": "^4.14.1",
  "prettier": "^2.1.2",
  "sass-loader": "^10.0.3",
  "style-resources-loader": "^1.3.3",
  "ts-jest": "^26.4.1",
  "ts-node": "^9.0.0",
  "typescript": "~4.0.3",
  "vue-cli-plugin-quasar": "~3.0.1",
  "vue-cli-plugin-style-resources-loader": "~0.1.4",
  "vue-cli-plugin-webpack-bundle-analyzer": "~2.0.0",
  "vue-jest": "^3.0.7",
  "vue-template-compiler": "^2.6.12"
},
"homepage": "https://re-solute.eu",
"license": "ISC",
"jest": {
  "moduleFileExtensions": [
    "js",
    "ts",
    "json",
    "node",
    "vue"
  ],
  "moduleDirectories": [
    "node_modules",
    "src"
  ],
  "moduleNameMapper": {
    "src/(.*)": "<rootDir>/src/$1",
    "quasar": "quasar/dist/quasar.umd.min.js"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "transform": {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.ts?$": "ts-jest",
    "^.+\\.js$": "babel-jest"
  },
  "testURL": "http://localhost/"
}

Any hints?

dobbel

@manubi

You could try to change the component import strategy in quasar.conf file:

Possible values for "all":
    'auto' - Auto-import needed Quasar components & directives
     false - Manually specify what to import
     true  - Import everything from Quasar

First try ‘true’ strategy:

framework: {
   // 'auto' replaced with true
   all: true
...

If that does not work you could try to manually define all the used components:

framework: {
   all: false,
   components: [  'QLayout', 'QHeader', 'QPage', ect...]   
...

manubi

Thanks for the help, but the thing is I don’t have a quasar.conf file because I have quasar installed via vue cli with a quasar plugin. What I have is a quasar.js file that looks like this.

import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
import '@quasar/extras/material-icons/material-icons.css'
import { LocalStorage, Notify, Quasar } from 'quasar'
import Vue from 'vue'
import './styles/quasar.scss'

Vue.use(Quasar, {
  config: {},
  components: ['QPage'],
  directives: {
    /* not needed if importStrategy is not 'manual' */
  },
  plugins: { Notify, LocalStorage }
})

If I import them manually it still doesn’t work. Any other ideas?

dobbel

@manubi

how about importing the Quarar components your need for the test manually like in this example:
https://github.com/testing-library/vue-testing-library#a-basic-example

manubi

doesn’t really help… any other ideas?

dobbel

@manubi

Could you be more specific? Why would the example not work for importing a q-page instead of the Button in the example.

Best to create a codepen or repo that demo’s your problem.

No More Posting New Topics!

Component register error with Jest testing