search

nuxt-community / fontawesome-module

Module to use Font Awesome icons in Nuxt.js
MIT License
110 stars 12 forks source link

[Vue warn]: Unknown custom element: XXX did you register the component correctly? For recursive components, make sure to provide the "name" option. #32

Closed rlam3 closed 3 years ago

rlam3 commented 3 years ago

nuxt.config.js Screen Shot 2021-03-20 at 6 59 41 AM

Jest test case Screen Shot 2021-03-20 at 7 01 29 AM

pages/order/index.vue Screen Shot 2021-03-20 at 7 01 57 AM

error message. Screen Shot 2021-03-20 at 7 02 11 AM

//package.json
{
  "name": "XXXXX",
  "version": "1.0.0",
  "type": "module",
  "description": "XXXX",
  "author": "XXX",
  "private": true,
  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3232 nuxt",
    "dev:debug": "node --inspect node_modules/.bin/nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "test": "jest",
    "test:unit": "jest --watch",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "lint:dryrun": "eslint --fix-dry-run --ext .js,.ts,.vue --ignore-path .gitignore .",
    "heroku-postbuild": "npm run build",
    "lint-staged": "lint-staged",
    "commitlint": "commitlint",
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "git add ."
    ]
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/google-analytics": "^2.4.0",
    "jquery": "^3.6.0",
    "nuxt-edge": "^2.16.0-26936677.9247190c",
    "vue-flex-waterfall": "^1.0.7",
    "vue-instagram": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@types/jest": "^26.0.20",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "commitizen": "^4.2.3",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-standard": "^5.0.0",
    "fibers": "^5.0.0",
    "husky": "^5.1.3",
    "iview": "^3.5.4",
    "iview-loader": "^1.0.0-beta.4",
    "jest": "^26.6.3",
    "jest-transform-stub": "^2.0.0",
    "lint-staged": "^10.5.4",
    "mutationobserver-shim": "^0.3.7",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^4.3.3",
    "ts-jest": "^26.5.3",
    "vue": "^2.4.4",
    "vue-agile": "^0.2.6",
    "vue-awesome": "^2.3.3",
    "vue-gallery": "^2.0.1",
    "vue-i18n": "^8.24.1",
    "vue-jest": "^3.0.7",
    "vue-waterfall": "^1.0.6"
  }
}

Hi, I'm running into the following error with this module with my jest tests. 

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

    found in

I also see that another issue similar to mine is open but didn't provide a definitive answer. https://github.com/nuxt-community/fontawesome-module/issues/21

sebalaini commented 3 years ago

same here,

this is my config:

  buildModules: [
    ....
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        {
          set: '@fortawesome/free-regular-svg-icons',
          icons: ['far']
        }
      ]
    }]
  ],

All works good in the components but getting the annoying warning when testing with jest.

rlam3 commented 3 years ago

@sebalaini https://aznric3boi91.medium.com/5-mins-to-fix-jest-tests-for-app-with-unknown-custom-element-did-you-register-the-component-23ae75d5620b check this out stubbing fa helped my test pass.

sebalaini commented 3 years ago

@rlam3 that helped :) thank you