Configure isCustomElement for unit tests

[antoniogiroz]

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!

[lmiller1990]

Hi! This is a pretty unusual use case - haven't seen this one before

Is

global: {
        config: {
          compilerOptions: {
            isCustomElement: tag => tag.startsWith('wb-'),
          },
        },
      },

Actually valid? I am not sure we support config.compilerOptions. I am not sure I can look into this one right now (pretty obscure use case, and a bunch of other more common problems to fix) but if you want to look into this, that's where I'd recommend starting.

[antoniogiroz]

Hi,

Did you mean that it is pretty unusual to use custom web components in a Vue app?

In fact, these warnings also are shown with components registered globally.

Anyway, I've had to disable these annoying warnings with the --silent jest flag since it causes the tests to last too long and are unreadable.

Thanks!

[lmiller1990]

Yeah, I have not seen many ppl using Web Components + Vue. Although it's a valid use case for sure!

Sounds like this warning isn't doing too much harm, but it would be nice to get it fixed. Not sure I can look into it - if you want to, by all means. If not, that's fine, at least we know this bug exists and someone else may be able to pick it up.

[jeremeevans]

Any progress on this? It's an annoyance, to be sure.

[lmiller1990]

Not sure, unless someone is going to make a PR it's unlikely to be fixed.

[ermenm]

I am using Jest for my unit tests and the solution for me that made the warning disappear was to clear the Jest cache by entering
npx jest --clearCache in the terminal

EDIT:
by trying out the --no-cache flag in the unit test script, the message also disappears after trying out custom webcomponents
"test:unit": "vue-cli-service test:unit --no-cache",

[oinn]

Hi. I solve this problem for myself by adding "globals" block in jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ['./jest.setup.ts'],
  globals: {
    'vue-jest': {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('ui-'),
      },
    },
  },
};

And my jest.setup.ts file:

import { config } from '@vue/test-utils';
import UiKit from '@my-ui/kit';

config.global.plugins = [UiKit];

[splanard]

Currently, I have the same issue.
@oinn in your solution, what does UiKit refer to ?

[lmiller1990]

This issue might have some work arounds/solutions: vuejs/vue-jest#389

[oinn]

@splanard it's my UI Kit library. You can check code on https://github.com/oinn/crm-b2c-ui/tree/master/packages/kit

[splanard]

@oinn Thanks.
Your solution isn't working for me, sadly :/

@lmiller1990
No workaround seems to get rid of these warnings, except the --silent option which is not satisfying.

[lmiller1990]

I did not get to look into this, but the way I'd debug this is

1. go into node_modules/vue (or node_modules/@vue) and find out where this warning comes from.
2. follow the code - there's got to be some conditional the triggers this.
3. find out how to set that conditional

Once we know, we can

1. find out how to set said conditional in here, if possible
2. if not, add an option to do so