Vue-test-utils: Remove TransitionStub / TransitionGroupStub from docs

[FloEdelmann]

They were removed without further notice in beta 30, but the docs are not updated. It took me quite some time to figure out that they don't exist anymore, and how to fix my failing test:

<transition name="toast">
    <div v-if="visible" class="toast">...</div>
</transition>

toastElement.querySelector('.close').click()
await wrapper.vm.$nextTick()

toastElement = document.querySelector('.toast')
expect(toastElement).to.equal(null)

Test fails; there is a .toast element with .toast-leave-active class.

Replacing the nextTick with await new Promise(resolve => setTimeout(resolve, 5)) works, but doesn't look like it's safe against race conditions.

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

[FloEdelmann]

This is not a usage question; I couldn't select vue-test-utils version 1.0.0-beta30 in the Issue Helper.

[JessicaSachs]

Apologies for the problem with our issue helper.

@FloEdelmann , thank you for reporting this. I believe the docs are fixed. Can you confirm? https://vue-test-utils.vuejs.org/api/components/

[FloEdelmann]

Thanks, the updated docs look fine now. Maybe you want to add one sentence about the removed stub components? That'd be helpful for people upgrading (like me), but will be less useful in the future.

[nachogarcia]

+1 to @FloEdelmann we updated from beta29 to 30 and now all our components that contain transitions fail.
There is no documented way of having global stubs (for transitions in this case) rather than adding the stub manually to each test.

[dobromir-hristov]

Maybe this? @nachogarcia https://vue-test-utils.vuejs.org/api/#config

[nachogarcia]

Nope, I already tried with

config.stubs.transitioncomponent = '<div />'
config.stubs['transition-group'] = '<div />'

and all of our tests fail, probably because children are not rendered since it needs a stub like the previous one https://github.com/vuejs/vue-test-utils/blob/f0b863252398f2b163f4b267d16103f06c7a53a2/packages/test-utils/src/components/TransitionStub.js which is not exported anymore

[JessicaSachs]

@nachogarcia We’re about to update the docs with a better transitionStub. Can you give these instructions a try? https://github.com/vuejs/vue-test-utils/pull/1375/files

[nachogarcia]

Looks like, as documented there, using this

const transitionStub = () => ({
  render (h) {
    return this.$options._renderChildren
  }
})

config.stubs.transitioncomponent = transitionStub()
config.stubs['transition-group'] = transitionStub()

along with await wrapper.vm.$nextTick() works @JessicaSachs .

But this way I'm going to need to refactor hundreds of tests, adding the line and an making them async to wait for an update that so far has been done automatically :S seems weird.

[FloEdelmann]

@JessicaSachs The updated docs in #1375 are exactly what I was searching for when I was upgrading to 1.0.0-beta.30, thanks :blush:
I've suggested some minor changes there to improve the wording.

Since the docs are now clearly explaining what I was missing, I'm closing this issue.

[JessicaSachs]

Unfortunately, the nextTick changes will remain required for future versions of VTU. To explain the need for these changes, please take a look through #1137

You can pin at version 28 if you’d like to remain synchronous.