Vue-test-utils: shallowMount(Parent).contains(Child) returns false if Parent uses Child as a dynamic component (#853)

[caugner]

Version

1.0.0-beta.23

Reproduction link

https://gitlab/mygroup/myproject

Steps to reproduce

Parent.spec.js

import { shallowMount } from "@vue/test-utils";
import { expect } from "chai";
import { Parent, Child } from "@/components";

describe("Parent.vue", function() {

  it("contains Child", () => {
    expect(shallowMount(Parent).contains(Child)).to.be.true;
  });
});

Parent.vue:

<template>
  <Child />
</template>

<script>
export default {
  components: {
    Child: () => import("@/components/Child")
  }
}
</script>

What is expected?

The tests should pass (like they did in 1.0.0-beta.20).

What is actually happening?

  1) Parent.vue
       contains Child:

      AssertionError: expected false to be true
        expected - actual

      -false
       true

[caugner]

This is a follow-up of #853 (fixed in #864).

[eddyerburgh]

I believe this was working previously as a side effect of not being stubbed correctly. When we create the stubs, we don't have enough information to create a stub that can be identified with a component selector, like you have in your example.

You can acheive this functionality by using mount:

it('renders dynamic import', (done) => {
  const wrapper = mount(TestComponent)
  setTimeout(() => {
    expect(wrapper.find(Component).exists()).to.equal(true)
    done()
  })
})

Or by stubbing the component with the stubs option:

it('renders dynamic import', () => {
  const wrapper = mount(TestComponent, {
    AsyncComponent: Component
  })
  expect(wrapper.find(Component).exists()).to.equal(true)
})

Unfortunately, I don't think we'll be able to achieve the auto stubbing that you expected.

[caugner]

Thank you for the explanation, which totally makes sense, and the solutions. :-)