Question: How to use a real Transition component?

[hasan-almujtaba]

Describe the bug
I create a dialog which need to watch props to make the transition happen. Unfortunately the transition not triggering because the data which need to be updated by watch not updated.

To Reproduce
https://stackblitz.com/edit/vitest-dev-vitest-h26bhi?initialPath=__vitest__

Expected behavior
VTU render the component inside transition

Related information:

System:
OS: Windows 10 10.0.22000
CPU: (4) x64 Intel(R) Core(TM) i3-8145U CPU @ 2.10GHz
Memory: 2.25 GB / 7.86 GB
npmPackages:
@vue/test-utils: ^2.2.0 => 2.2.0
vitest: ^0.24.3 => 0.24.3
vue: ^3.2.45 => 3.2.45

[cexbrayat]

hi @hasan-almujtaba

Thanks for the repro

I don't get how that's supposed to work:

watch(props, () => {
  if (props.modelValue) {
    showOverlay.value = true;
    return;
  }
  showContent.value = !showContent.value;
});

when you call await wrapper.setProps({ modelValue: true });
then the watcher runs, but as the condition is true, the code returns before toggling the showContent value right?
So the dialog is never shown? If you remove the return statement then the test succeeds

[hasan-almujtaba]

hi @cexbrayat, thanks for your response :)

Basically, the watch function does 2 things:

1. Set showOverlay in dialog open (modelValue true)
2. Set showContent in dialog close (modelValue false)

This is the step when modelValue set to true:

1. showOverlay become true and triggering the first <Transition/>
2. In first <Transition/> it have @after-enter="toggleContent" which will set showContent to be true
3. And finally the second <Transition/> will be triggered because showContent is true

This is the step when modelValue set to false:

1. set showContent to be false and triggering the second <Transition/>
2. in second <Transition/> it have @after-leave="toggleOverlay" and this will make showOverlay set to false

When modelValue is true it the first <Transition/> will triggered first, and when modelValue is false the second <Transition/> will triggered first.

I can't remove return in line 76 because it will make the component won't work in browser, the dialog will open and close again.

[cexbrayat]

Ha OK. It's not a problem with the watcher then. It's because your test uses a transition mock (this is the case by default in VTU), and that mock won't emit events like afterEnter. You can try to use:

global: {  
  stubs: {
    transition: false
  }
}

to use the real transition component, but then you'll have to trigger the next frame for the animation to finish. If I remember correctly, you can mock requestAnimationFrame to do so with something like:

vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb())

So something like this works:

  it('should set width based on props', async () => {
    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
    const wrapper = mount(Dialog, {
      props: {
        width: '400px',
      },
      global: {
        stubs: {
          transition: false
        }
      }
    });

    await wrapper.setProps({ modelValue: true });

    console.log(wrapper.html());

    expect(wrapper.get('.dialog').attributes('style')).toBe('width: 400px;');
  });

[hasan-almujtaba]

Ha OK. It's not a problem with the watcher then. It's because your test uses a transition mock (this is the case by default in VTU), and that mock won't emit events like afterEnter. You can try to use:

global: {  
  stubs: {
    transition: false
  }
}

to use the real transition component, but then you'll have to trigger the next frame for the animation to finish. If I remember correctly, you can mock requestAnimationFrame to do so with something like:

vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb())

So something like this works:

  it('should set width based on props', async () => {
    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
    const wrapper = mount(Dialog, {
      props: {
        width: '400px',
      },
      global: {
        stubs: {
          transition: false
        }
      }
    });

    await wrapper.setProps({ modelValue: true });

    console.log(wrapper.html());

    expect(wrapper.get('.dialog').attributes('style')).toBe('width: 400px;');
  });

It works like a charm now! Thanks!

But this code vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb()); give a TS error Type 'void' is not assignable to type 'number | Promise<number>'

[cexbrayat]

I'm glad that helped 👍

You can just cast with TS or add a return 0 I guess as the mock implementation should return a number cb => { cb(); return 0; }

Let's close this as not an issue then

[hasan-almujtaba]

Yes something like that will works. I modify a bit of your example and now there's no TS error.

vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
    callback(0)
    return 0
})

[hasan-almujtaba]

For anyone in the future with a similar problem, here's the complete code to use the real transition component in Vitest + VTU testing

it('should set width based on props', async () => {
		vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
			callback(0)
			return 0
		})

		const wrapper = mount(Dialog, {
			props: {
				width: '400px',
			},
			global: {
				stubs: {
					transition: false,
				},
			},
		})

		await wrapper.setProps({ modelValue: true })

		expect(wrapper.get('.dialog').attributes('style')).toBe('width: 400px;')
	})

References:

• https://test-utils.vuejs.org/guide/advanced/transitions.html
• https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount.html
• https://vitest.dev/api/#vi-spyon
• https://vitest.dev/api/#mockimplementation