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.