vue-test-utils: Some stubbed Vuetify components can't be found with `find` wrapper method

Version

1.0.0-beta.29

Reproduction link

https://github.com/anthonygore/vuetify-test

Steps to reproduce

npm i npm run test:unit

What is expected?

All tests should pass

What is actually happening?

The second test fails as the VTextField component can’t be found.

I don’t know if this is a Vuetify issue or a Vue Test Utils issue, but some stubbed child components can’t be found with the find wrapper method when the parent is shallow mounted.

It’s not just VTextField, either, VSelect also has this problem, while others like VIcon work just fine.

import { shallowMount } from "@vue/test-utils";
import Vuetify from "vuetify";
import { VBtn, VTextField } from "vuetify/lib";

Vue.use(Vuetify);

const component = {
  template: `
    <div>
      <v-btn />
      <v-text-field />
    </div>
  `
};

// Passes
it('should find v-btn', () => {
  const wrapper = shallowMount(component);
  expect(wrapper.find(VBtn).exists()).toBe(true);
});

// Fails
it('should find v-text-field', () => {
  const wrapper = shallowMount(component);
  expect(wrapper.find(VTextField).exists()).toBe(true);
});

Update

I think the issue is something to do with how some global components are registered because this works:

Vue.use(Vuetify);

const component = {
  template: `
    <div>
      <v-btn />
      <v-text-field />
    </div>
  `,
  components: {
    VTextField
  }
};

Note that I don’t need to locally register VBtn, just VTextField…

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 23 (14 by maintainers)

Commits related to this issue

fix: stub globally registered components fix #1272 — committed to thejcannon/vue-test-utils by thejcannon 4 years ago
fix: stub globally registered components When specifying the components to stub, merge the globally registered components into the locally registered ones. (fix #1272) — committed to thejcannon/vue-test-utils by thejcannon 4 years ago
fix: stub globally registered components When specifying the components to stub, merge the globally registered components into the locally registered ones. (fix #1272) — committed to thejcannon/vue-test-utils by thejcannon 4 years ago
fix: stub globally registered components (#1441) When specifying the components to stub, merge the globally registered components into the locally registered ones. (fix #1272) — committed to vuejs/vue-test-utils by thejcannon 4 years ago

Most upvoted comments

Hey @anthonygore , This is likely something to do with the fact VTextField extends from VInput, as shown here in the source code for Vuetify.

Iirc if you pass a component to find it will match against the prototype, and in this case VTextField.prototype !== VInput.prototype it returns false.

A work around would be to pass an object with name to find. So you could try:

it('should find v-text-field', () => {
  const wrapper = shallowMount(component);
  expect(wrapper.find({ name: 'v-text-field' }).exists()).toBe(true);
});

That may work.

lmiller1990 on Aug 14, 2019

@lmiller1990 I’ve some progress here, but in the same point 0 again. Take a look:

 InfosetsHeader.component
    ✓ renders Minhas Listas at top when rendered (3ms)
    ✕ renders a Button component to create new lists (13ms)

  ● InfosetsHeader.component › renders a Button component to create new lists

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      32 |     const btn = wrapper.find(".v-btn");
      33 |     // console.log("btn", btn);
    > 34 |     expect(btn.exists()).toBe(true);
         |                          ^
      35 | 
      36 |     /* mock event */
      37 |     const event = jest.fn();

      at Object.<anonymous> (tests/unit/infosets/components/InfosetsHeader.spec.ts:34:26)

The v-btn and any vuetify components are unfindable. The current state is that Vuetifiy is just untestable at all, at least with Jest. Things like that, just increase the Javascript fatigue for me, because IMHO, things like this (testing, etc), should work out-of-box really.

aislanmaia on Nov 21, 2019

I’m having this issue as well in my own library (not using or related to Vuetify).

In my jest setup I use Vue.component('FooBar', require('.../path/to/FooBar.vue').default) In my test I import 'FooBar' from '.../path/to/FooBar.vue' I provide stubs: {FooBar: true} in my options when mount-ing (not shallow)

Then wrapper.find(FooBar) fails, even though I’m using <foo-bar .../> in the component.

I’ve noticed that wrapper.find('foobar-stub') works, but the props are empty so testing it is moot.

thejcannon on Jul 18, 2019