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

[beneee]

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: vuejs/vue-test-utils#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?

[lmiller1990]

I wonder why it's not having the same problem for just one spec? Very weird.

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?

My first idea was configure the compiler options using the mounting options:

describe('Counter.vue', () => {
  it('renders button', () => {
    const { getByRole } = render(Counter, {
      global: {
        config: {
          compilerOptions: {
            isCustomElement: (tag: string) => {
              return tag.startsWith('vaadin-')
            },
          },
        },
      },
    })
    expect(getByRole('button')).toBeInTheDocument()
  })
})

But this didn't seem to have any effect.

I also tried putting a console.log in the Jest config:

// ...
    'vue-jest': {
      compilerOptions: {
        isCustomElement: (tag) => {
          console.log('OK!')
          return tag.startsWith('vaadin-')
        }
      },
    },
  },

The log is never printed when running yarn jest. For some reason, like you said, the global config is only applied on a per spec basis.

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.

If this is truly the problem, but is it working when running just one spec? Does it only serialize the config when running all specs? This seems really odd.

What a strange bug. I think we need to investigate why is doesn't occur when running just one spec at at time.

[lmiller1990]

Could be related ... I dug into node_modules a bit and notice this is returning false, so the code that relates to isCustomElement may not actually be executed:

Edit: tried hardcoding both true and false, makes no difference. Definitely need to dig into this more deeply. First thing I would do is follow the trail and make sure the custom compilerOptions you are specifying are actually passed. Are they passed but ignored? Is it definitely a Jest serialization error?

[beneee]

Sorry for not getting back to this topic earlier.

I also dug into node_modules but decided to look into how jest executes the tests and passes the config to whatever is running the tests.

The first thing I discovered was that everything works just fine without any "Failed to resolve component" warnings printed to the console when running multiple test spec files at once but in sequence with Jest's --runInBand option (npx jest --runInBand). The globals config object will not be serialized by Jest when running all test files in band. (Also added this case to my demo project, if you want to replicate this behavior.)

Running a single test file (e.g. jest --no-cache src/components/Counter.spec.ts) will also trigger jest to run an in band test run which seems to be the reason why running a single spec file worked fine without any Vue compiler warnings when I set up my demo project.

Things get a bit more interesting when running a parallel test run. In this case Jest will create workers to run the individual spec files that execute the tests in child processes. The globals config object (and other config) is sent to the child process with the subprocess.send function from Node.js' child_process. I'm quite sure that this is the spot where the isCustomElement config gets lost as the message that is sent to the child process goes through serialization:

"The message goes through serialization and parsing. The resulting message might not be the same as what is originally sent." (Source)

[lmiller1990]

What the heck, how do we fix this 🤔 nice job isolating this to only happening in parallel runs.

[stefanlivens]

A kind of FYI: I had in my jest.config.js this transform:
'.*\\.(vue)$': '@vue/vue3-jest' but then the compilerOptions were NOT taken into account.
Changing this to '^.+\\.vue$': '@vue/vue3-jest' then it does !

But now I have failing unit-tests due to stubbed web-components.
(eg. adding bob-header to the stubs will make this fail: expect(wrapper.find('bob-header-stub').exists()).toBeTruthy();)

[Oleksii14]

Hey guys, any updates on that? Those warnings are quite annoying. Here is a workaround:

it ('...' => {
 const wrapper = shallowMount(Component, {
  global: {
    stubs: {
      'custom-element': {
              template: '<i />',
      },
   },
  }
 })
})

[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

[lmiller1990]

What's not working with Jest 27 for you?

[stephan-roolvink]

I'm also running into this problem, it there any indication on who and when this problem will be addressed?

[lmiller1990]

It looks like this is fixed in alpha 27 @stephan-roolvink, see the comment two above yours: #389 (comment)

Unless someone who really needs this to be fixed is going to submit a PR, it probably won't be fixed - at least, I'm not working on this issue right now, since it's apparently fixed in a newer version of Vue Jest. What version are you on?

[iulianmihai]

I use alpha 27 and the issue still exists. I tried the suggestions from this link https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue, but without any success.

[Edgaras318]

Hello, anyone solved this issue with Vue 3, vue jest ? I wanna test my components using Vue testing library, but I use Element UI and can find way to fix errors:
console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
[Vue warn]: Failed to resolve component: el-card
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at
at

[lmiller1990]

@Edgaras318 I think the issue you are having is different, it looks like you did not install the Element UI library in your tests.

You probably need something like:

import ElementPlus from 'element-plus'
import { render } from '@testing-library/vue'

render(Foo, {
  globals: {
    plugins: [ElementPlus]
  }
})

Not tested, but it's a plugin - if you install it, those elements should work just fine. This issue is about custom elements such as Web Components.

[Edgaras318]

Thanks man ! I solved it!