Open
Description
Subject of the issue
Unable to config isCustomElement for unit tests.
Steps to reproduce
I am using a web component library built with the Stencil framework. Some warning errors were displayed in the browser console in both development and production mode: "Failed to resolve component: wb-icon". I solved this by setting isCustomElement as follows:
For development (npm run serve):
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
isCustomElement: tag => tag.startsWith('wb-'),
};
return options;
});
},
};For production (npm run build):
// main.ts
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('wb-');To configure this for unit testing I've tried all the following ways without result:
// jest.config.js
module.exports = {
setupFilesAfterEnv: ['./jest.setup.ts'],
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
transform: {
'^.+\\.vue$': [
'vue-jest',
{
templateCompiler: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('wb-'),
},
},
},
],
},
transformIgnorePatterns: ['/node_modules/(?!@ag-grid-community)'],
restoreMocks: true,
verbose: true,
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
};// jest.setup.ts
import '@testing-library/jest-dom';
import { config } from '@vue/test-utils';
config.global.config.compilerOptions = {
isCustomElement: tag => tag.startsWith('wb-'),
};And finally, in each unit test:
// BaseIcon.test.ts
import { prettyDOM, render } from '@testing-library/vue';
import BaseIcon from '@/components/BaseIcon.vue';
describe('BaseIcon', () => {
it('testing render icon', async () => {
const component = await render(BaseIcon, {
props: {
name: 'alert',
'flip-rtl': true,
},
global: {
config: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('wb-'),
},
},
},
});
prettyDOM(component.debug() as any);
});
});Expected behaviour
No warnings about unresolved components should be shown.
Actual behaviour
What happens instead? Instead, a warning is shown in the console with the following message:
console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
[Vue warn]: Failed to resolve component: wb-icon
at <Anonymous name="alert" flip-rtl=true ref="VTU_COMPONENT" >
at <VTUROOT>
Thanks!
ejgyurisan, sonicoder86, Akh0, Theiaz, gustavoaz7 and 4 more