Vue-test-utils: beta26: Component registration warning which occurs only in the context of vue-test-utils

[mkopinsky]

Version

1.0.0-beta.26

Reproduction link

https://github.com/mkopinsky/vue-test-utils-component-registration

Steps to reproduce

git clone [email protected]:mkopinsky/vue-test-utils-component-registration.git
cd vue-test-utils-component-registration
yarn install
yarn run test:unit

What is expected?

Tests should pass without any warnings

What is actually happening?

As of beta26, I get this warning:

[Vue warn]: Unknown custom element: <modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue

Weirdly enough, if I comment out the <survey/> component from the HelloWorld.vue template, vue-test-utils stops complaining about the <modal/> component. So somehow when vue-test-utils loads the <survey/> component, that causes it to fail to load the modal component.

It's possible this is an issue with how vue2-strap3 or survey-vue is exporting their components. But this app works fine in the browser, and that means it probably should work in vue-test-utils as well.

---

In beta25, vue-test-utils output the following warning, which no longer appears in beta26. I don't know if that's related to this, but I thought it was worthy of inclusion. Setting that config in beta26 does not affect the component registration warning.

[vue-test-utils]: The child component <survey> has been modified to ensure it is created with properties injected by Vue Test Utils. 
This is because the component was created with Vue.extend, or uses the Vue Class Component decorator. 
Because the component has been modified, it is not possible to find it with a component selector. To find the component, you must stub it manually using the stubs mounting option, or use a name or ref selector. 
You can hide this warning by setting the Vue Test Utils config.logModifiedComponents option to false.

[metasean]

Duplicate of #1053?

fwiw: I'm seeing similar errors after a bump up to 1.0.0-beta.27

[davidrunger]

I encountered this problem as well. I use dependabot to stay up-to-date with every release of vue-test-utils. This issue was not occurring for me in beta25. The issue emerged in beta26 and continues in beta27.

CodeSandbox reproduction

In case it helps, here is a relatively minimal CodeSandbox reproduction of how I am experiencing this issue: https://codesandbox.io/s/o5qw6rxkz6

In that CodeSandbox, TestComponent.vue contains the following (with the el-icon component coming from element-ui the source of which is here https://github.com/ElemeFE/element/blob/v2.4.11/packages/icon/src/icon.vue):

<template>
  <div>
    <el-icon name="success" />
    <ChildComponent />
  </div>
</template>

<script>
import { Icon } from "element-ui";
import ChildComponent from "./ChildComponent.vue";
import Vue from "vue";

Vue.use(Icon);

export default {
  components: {
    ChildComponent
  }
};
</script>

The test fails with:

Expected string:
  ""
To contain value:
  "Words in ChildComponent"

However, as can be seen in the CodeSandbox browser simulation (or by going to https://o5qw6rxkz6.codesandbox.io/), there is no problem rendering the <ChildComponent /> (which has the text "Words in ChildComponent") or the el-icon (a checkmark in a circle).

This also logs a warning of:

Unknown custom element: <ChildComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 

Note that the warning complains about Unknown custom element: <ChildComponent> but -- as will be seen shortly -- the problems seem to be more related to el-icon than to ChildComponent (similar to what @mkopinsky reported in his original post, in the paragraph starting "Weirdly enough, [...]").

Fix 1: don't try to render el-icon

CodeSandbox forked from the one above: https://codesandbox.io/s/8xz2w8zkmj

This removes the lines:

1. <el-icon name="success" />
2. import { Icon } from "element-ui";
3. import Vue from "vue";
4. Vue.use(Icon);

The test now passes and there are no warnings. However, we are no longer rendering the checkbox-in-a-circle icon.

Fix 2: Register the ElIcon component as a local component

CodeSandbox: https://codesandbox.io/s/qv34068lv6

This approach changes:

1. import { Icon } from "element-ui"; to import { Icon as ElIcon } from "element-ui";
2. removes import Vue from "vue"; and Vue.use(Icon);
3. adds ElIcon to the components object in TestComponent.vue

The test passes and there are no warning _and_ we are still rendering the checkbox-in-a-circle icon. The downside of this approach is that we don't have the convenience of registering el-icon globally (which isn't actually a "convenience" in this minimal example, since we are only using el-icon once, but you can imagine that this might be a commonly used component that it would be convenient to register globally).

Fix 3: Change the order of el-icon and ChildComponent in the template

CodeSandbox: https://codesandbox.io/s/48k10282o0

Surprisingly, the test passes and the warning goes away simply by changing the <template> from:

<div>
  <el-icon name="success" />
  <ChildComponent />
</div>

to:

<div>
  <ChildComponent />
  <el-icon name="success" />
</div>

The problem with this solution, though, is that the elements are not rendered in our desired order (we want the checkbox to come before the text). The other problem is that it makes no sense why this solution works. 😛 🙃

[Nikita240]

+1 experiencing same problem with v1.0.0-beta.26 and v1.0.0-beta.27. Downgrading to v1.0.0-beta.25 resolves the issue.

[boboldehampsink]

Same here, downgrading to beta 25 solves the issue.

[Prior99]

Can we expect this to be fixed soon? It keeps me from upgrading.

[davidrunger]

I can confirm that the issue described above is indeed fixed (for me, at least) in 1.0.0-beta.28. Thank you so much, @eddyerburgh! 💖