Crash in render when trying to shallowMount with <Suspense>

[snoozbuster]

  it('crashes when shallow mounting a component that uses Suspense', () => {
    const Foo = {
      template: '<div class="Foo">FOO</div>',
      setup() {
        return {};
      },
    };
    const Component = {
      template: `
        <Suspense>
          <template #default>
            <Foo />
          </template>
          <template #fallback>
            Fallback
          </template>
        </Suspense>`,
      components: { Foo },
    };
    const wrapper = shallowMount(Component);
    expect(wrapper.html()).toEqual('<Foo />');
  });

Crashes with:

TypeError: Cannot read property 'replace' of undefined

      63 |       components: { Foo },
      64 |     };
    > 65 |     const wrapper = shallowMount(Component);
         |                     ^
      66 |     expect(wrapper.html()).toEqual('<Foo />');
      67 |   });
      68 | });

      at node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1768:16
      at node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1763:37
      at matchName (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1779:21)
      at resolveComponentStubByName (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2150:13)
      at node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2218:24
      at createVNodeWithArgsTransform (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5223:11)
      at createBlock (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5187:19)
      at Proxy.render (eval at compileToFunction (node_modules/vue/dist/vue.cjs.js:73:22), <anonymous>:14:27)
      at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:707:44)
      at componentEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4158:53)
      at reactiveEffect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:46:24)
      at Object.effect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:21:9)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4141:38)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4099:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4059:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3687:21)
      at componentEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4176:21)
      at reactiveEffect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:46:24)
      at Object.effect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:21:9)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4141:38)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4099:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4059:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3687:21)
      at render (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4759:13)
      at mount (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3028:25)
      at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1220:23)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2416:18)
      at shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2421:12)
      at Object.<anonymous> (src/catalog/__tests__/CatalogAppView.spec.ts:65:21)

  console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Unhandled error during execution of render function 
      at <Anonymous ref="VTU_COMPONENT" > 
      at <VTUROOT>

Issue looks like it stems from here:

https://github.com/vuejs/vue-test-utils-next/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/src/stubs.ts#L159

name is undefined for a <Suspense> component (you do get an __isSuspense: true, though). It gets passed down a couple layers and eventually crashes on a string operation related to component matching.

It's not immediately clear to me what a good fix for this is. Not crashing would be a good start, but what does it even mean to stub out a <Suspense>? Maybe for now, an isSuspense(type) in this section to never stub it would be enough...

https://github.com/vuejs/vue-test-utils-next/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/src/stubs.ts#L132-L139

[cexbrayat]

@snoozbuster Thank you for opening an issue and for your investigation.

I think a nicer way to fix it would be for Suspense to have a name in vue-next. I opened vuejs/core#3312 we'll see if that gets merged, and if that fixes this issue.

If not, your suggestion will probably be the way to go.

[lmiller1990]

I love it when bugs in test utils lead to improvements in upstream.

I am guessing your assertion will become expect(wrapper.html()).toEqual('<foo-stub />');.