Bug: incapable of getting value from a teleport to body

[VividLemon]

Describe the bug

The documentation is not clear about getting values from a value that is not a component.

To Reproduce

teleport to body, try to get a component wrapper from the body.
With stubbed out teleport, reactivity changes via setProps doesn't work

Expected behavior

Stubbed teleport manages to get the value, but it doesn't matter, as reactivity on those components doesn't work.

Ie. attempting to use await wrapper.setProps({}) doesn't change anything.

Related information:

• @vue/test-utils version: 2.x.x "^2.0.2",
• Vue "vue": "^3.2.37",
• node version: 16
• npm (or yarn) version:"[email protected]"

Additional context

Without global: {stubs: {teleport: true}}, it's impossible to use the test utils on the wrapper. With global: {stubs: {teleport: true}}, reactivity is broken and disregards setProps

Regardless, it would be better if I could simply use find() to get a value from the "body" ~~ where it is teleported to

  it('div has class fade when not prop noFade', async () => {
    const wrapper = mount(BModal, {
      global: {stubs: {teleport: true}},
      props: {noFade: false},
    })
    const $div = wrapper.get('div')
    expect($div.classes()).toContain('fade')
    await wrapper.setProps({noFade: true})
    expect($div.classes()).not.toContain('fade')
  })

const modalClasses = computed(() => [
  {
    fade: !noFadeBoolean.value,
    show: showBoolean.value,
  },
  props.modalClass,
])

[freakzlike]

I'm not sure if I understand your case correctly.
Can you provide a full repro on https://stackblitz.com/edit/vitest-dev-vitest-1vo1fe?file=package.json&initialPath=__vitest__?

[VividLemon]

You can view the real repo here
https://github.com/cdmoro/bootstrap-vue-3/blob/main/packages/bootstrap-vue-3/src/components/BModal.vue
&
https://github.com/cdmoro/bootstrap-vue-3/blob/main/packages/bootstrap-vue-3/src/components/modal.spec.ts#L58

It could have to do with the imported JS, but I'm not certain. It only seems that the file with the teleport has an issue with testing.

But the two tests below it that I made to substitute for the fact that setProps() wasn't working, both work fine. It's odd

[freakzlike]

It is working for me, when I don't use a variable to store the div wrapper. Can you try this on your tests?

  it('div has class fade when not prop noFade', async () => {
    const wrapper = mount(BModal, {
      global: {stubs: {teleport: true}},
      props: {noFade: false},
    })
    expect(wrapper.get('div').classes()).toContain('fade')
    await wrapper.setProps({noFade: true})
    expect(wrapper.get('div').classes()).not.toContain('fade')
  })

I need to figure out, why it is not working when using a saved wrapper + stubbed teleport.

[VividLemon]

I need to figure out, why it is not working when using a saved wrapper + stubbed teleport.

If you make yourself a quick separate test, if it works, then it would mean that it's something to do with my lib. I'm curious if it's just causing some odd issue to have the modal re-render a bunch of things from scratch, scrapping the original div to begin with. It's certainly strange.

Can you try this on your tests?

I don't think it's very necessary. The two tests below the one I had 'skipped', test the functionality required. If your example works, that's great. I think it's more necessary to figure out what exactly the issue is and why two separate divs are needed. Turning 'modelValue' to true causes the insides of the teleport to disappear... I don't really know why, unless it's bootstrap js modifying the dom.

[lmiller1990]

There's an example of one way to do this in the docs: https://test-utils.vuejs.org/guide/advanced/teleport.html. That might be helpful.

I tend to not test <Teleport> with Test Utils, but with an E2E test - but the above article shows there are some ways to do with Test Utils, too.

[cexbrayat]

@VividLemon Is there something more we need to do here, or does the workaround from @freakzlike helped you?
If not, can you provide a more minimal repro? (BModal.vue is a bit too big to figure out what's going on 😉)

[doutatsu]

Stub doesn't work for me - stub happens, but nothing inside gets rendered:

<teleport-stub data-v-90ea3908="" data-v-2f0168db="" to="body" disabled="false">
  <!---->
</teleport-stub>

[doutatsu]

Any progress on this? I've tried with the latest alpha version, but still not working, unfortunately.

[freakzlike]

Stub doesn't work for me - stub happens, but nothing inside gets rendered:

<teleport-stub data-v-90ea3908="" data-v-2f0168db="" to="body" disabled="false">
  <!---->
</teleport-stub>

@doutatsu Can you please create another issue with reproduction for your problem? I don't think it's related to this one

[cexbrayat]

Let's close this as we've not heard back from the OP

[VividLemon]

I was never requested for anything

[cexbrayat]

You may have missed a comment then #1781 (comment)