Component register error with Jest testing



  • 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?



  • @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...]   
    ...      
    


  • 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? 😃



  • @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



  • doesn’t really help… any other ideas?



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


Log in to reply