How do I handle the new isCustomElement setup for using web components in Vue 3 when unit testing with Jest

Viewed 1437

I am trying to write unit tests for my Vue 3 app using web components. I have Jest configured containing transform options:

  // ...
  "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
  },
  // ...

I need to use isCustomElement which is now required at compilation time, so I’ve added options based on the proposed solution in Vue3 docs like I did in webpack. I played around with it in the transform and global options. And also tried adding it to my babel.config.

  // ...
  "transform": {
      ".*\\.(vue)$":  ["vue-jest", {
        compilerOptions: {
          isCustomElement: tag => tag === 'my-custom-component'
        }
      }],
      "^.+\\.js$": "babel-jest"
  },
  // ...

However it’s still throwing a Vue warn when running tests: [Vue warn]: Failed to resolve component: my-custom-component.

Any ideas how to make isCustomElement work with Jest? I am at a loss as to what I need to set up to get rid of the console warnings and properly render the web components. In Vue 2 I just had to add them to setupFiles directly.

0 Answers
Related