Vue stubs not working in cypress 12.3.0 + vue 2.7.14 + script setup

[mverdaguer]

Current behavior

Cypress fails to stub components when working with Vue 2.7 and using <script setup>.
I prepared this github project with an example which I'll explain next.

Having a component like:

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'
</script>

<template>
  <div class="hello-world">
    <ChildComponent />
    <ChildComponent />
    <ChildComponent />
  </div>
</template>

Where ChildComponent can be anything.

Cypress fails to stub ChildComponent with the following code:

it("renders properly", () => {
    cy.mount(HelloWorld, { stubs: { ChildComponent: true } })
      .get("childcomponent-stub")
      .should("have.length", "3");  // It is returning 0!
  });

Whereas, if I set up the parent component like:

<script lang="ts">
import { defineComponent } from "vue";
import ChildComponent from "./ChildComponent.vue"

export default defineComponent({
  components: {
    ChildComponent,
  },
});
</script>

<template>
  <div class="hello-world">
    <ChildComponent />
    <ChildComponent />
    <ChildComponent />
  </div>
</template>

It works like a charm.

Desired behavior

Ideally both components should have the same output. That is, when creating a component with <script setup>, Vue stubs should work properly.

Test code to reproduce

https://github.com/mverdaguer/cypress-vue-2.7-stubs-not-working

Cypress Version

12.3.0

Node version

v16.19.0

Operating System

macOS 13.1

Debug Logs

No response

Other

No response

[lmiller1990]

Thanks for the bug report, I suspect the problem is in the underlying Vue Test Utils library: vuejs/vue-test-utils#2048

We should try fix it there.

[mverdaguer]

Thanks @lmiller1990!

[oevasque]

Hey @lmiller1990. What is going on?. What is the current status of this bug? It is totally annoying dont being able to test components when <script setup> is used (the current reommended way to declare the setup) 😭.

[lmiller1990]

To clarify, this only happens in Vue 2 (not Vue 3)?

I guess we need to fix vuejs/vue-test-utils#2048. The bug is in the actual Test Utils library. I don't have bandwidth to fix that one right now - I have to maintain the Vue 3 Test Utils, Vue Jest, cypress/vue, and many other libs -- if someone wants to fix vuejs/vue-test-utils#2048 I'd be happy to review and release a patch.

In general, I find is less necessary to stub components when I write tests with Cypress anyway - that's one of the things I like about it. Are you attempting to migrate an existing Test Utils suite to Cypress, or writing fresh tests in Cypress? If you'd like to share a specific componen/test you'd like to write, I might be able to make some recommendations. I've found that avoiding stubbing components has helped my tests be more useful and catch regressions.

[mverdaguer]

Hey @lmiller1990, yes in our case with Vue 3 stubs work as expected. So the problem happens only in Vue 2.