Error when mounting a single component

Hello there,

when mounting a single component, as done previously using the vue2 setup, I now get the following exception logged when trying to call the html() method on the wrapper:

TypeError: Cannot read property ‘parentElement’ of null

The behaviour is equivalent for the text() method.

When I am mounting my whole app, and not just the component, the issue is gone.

Could you explain if this is desired behaviour and how to test a component in isolation now?

my component:

<template>
  <div>
    <span>Pls render me..</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AsyncSetup',
  async setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped></style>

and a simple test case:

describe('AsyncSetup.vue', () => {
  it('should text as expected', async () => {
    const wrapper = mount(AsyncSetup);
    await nextTick();
    await flushPromises();
    expect(wrapper.html()).toMatchSnapshot(); // exception happens here, during the hmtl() call
  });
});

Thanks & Best Regards

[cexbrayat]

Ha yes OK, I understand now.

If your component has an async setup, you probably need to mount it in a “fake” async wrapper that has a Suspense (like you do in your real application I guess).

Something like:

const AsyncWrapper = defineComponent({
  components: { AsyncSetup },
  template: `<Suspense><AsyncSetup/></Suspense>`
});

And then mount(AsyncWrapper)

I agree that this is a bit tricky, and we were thinking of providing a mountAsync function, that would basically do that. Does that help?

[cexbrayat]

Happy to hear your test works.

We are definitely waiting for Suspense to stabilize a bit before making a decision, so we are all currently doing the same thing. Maybe we’ll add a built-in function or add it in a plugin, we’ll see.