`compilerOptions.isCustomElement` config has no effect when running multiple test files at once

Hi all,

I’m currently in the process to migrate an enterprisey Vue2 application to Vue3. The app uses custom element components built with lit-html all over the place to be in line with corporate design guidelines. For component testing we rely heavily on Vue Testing Library.

Unfortunately I ran into the same (or a similar) issue with configuring compilerOptions.isCustomElement for component tests that was reported by @antoniogiroz in the vue-test-utils project: https://github.com/vuejs/vue-test-utils/issues/1865

The isCustomElement compiler option is required to tell Vue’s template compiler how to detect whether an element is a vue component or a native custom element. If Vue fails to resolve a component it will print a warning like this:

[Vue warn]: Failed to resolve component: vaadin-button
 If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
   at <Anonymous ref="VTU_COMPONENT" >
   at <VTUROOT>

Although it is possible to add compilerOptions to the vue-jest object in the globals section of Jest’s config which gets passed to the template compiler by the vue3-jest library, this does not work properly for the isCustomElement function when running all test spec files at once. Even though the isCustomElement function was defined in Jest’s config file (see extract below), Vue prints warnings to the console output that it failed to resolve a custom element component.

globals object from jest.config.js:

globals: {
  'vue-jest': {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('vaadin-'),
    },
  },
},

The cause for this behavior seems to be that the globals object in Jest’s config “must be json-serializable” (see also globals [object] in Jest’s documentation) and Jest will omit everything that can not be serialized such as functions.

Interestingly enough, Jest does not seem to omit the isCustomElement function from the config when running a single test file with jest $PATH_TO_FILE/$FILE_NAME.spec.js. It appears that serializing of the globals config does only happen when running multiple test spec files at once.

You can find a project that demonstrates this behavior utilizing a vaadin-button web component here: https://github.com/beneee/vue3-jest-custom-elements-demo

Is there any other possibility to configure compilerOptions.isCustomElement when running tests with vue3-jest? Or is there any other way planned as configuring it in Jest configuration’s globals object will not work properly for functions?

[yashmasani]

Appreciate the workaround @Oleksii14 but with stubbing, its not possible to test out the inner html data or values 😦 Still looking for a better way to conserve the component without compiler issues

[PIPSKVIK]

The following worked in my case:

1. Create helper for wrapper with out font-awesome-icon componnet

import { shallowMount, mount } from '@vue/test-utils';

export const useWrapperWithoutIcon = (component, setup, shallow = false) => {
  return (shallow ? shallowMount : mount)(component, {
    global: {
      stubs: {
        'font-awesome-icon': {
          template: '<i />',
        },
      },
    },
    ...setup,
  });
};

1. And using as follows:

import BaseButton from './index.vue';
import { useWrapperWithoutIcon } from '../../../__test__/wrapperFactory';

describe('base-button', () => {
  it('should have custom btn name from default slot', async () => {
     const wrapper = useWrapperWithoutIcon(BaseButton, {
       slots: {
         default: 'Submit',
       },
     });

     expect(wrapper.text()).toContain('Submit');
   });
});

1. In the parameters of this, it is possible to use (mount , shallowMount ) -> depending on the passed parameter