New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cant waitFor
dom changes introduced by on:introend
#206
Cant waitFor
dom changes introduced by on:introend
#206
Comments
I have a similar issue: After losing focus or hover, my component animates out the Basically, I'm looking for some way to either completely disable transitions in a test environment, or reliably wait for them to conclude. |
Hi guys, any luck in fixing this one yet? I've been struggling with testing components that use vi.mock('svelte/transition', () => ({
fly: () => ({
delay: 0,
duration: 0
})
})); but it doesn't solve it. edit: I figured out a hacky solution: My component: {#each $toasts as toast (toast.id)}
{#if import.meta.env.VITEST}
<div data-testid="alert">
{@html toast.message}
</div>
{:else}
<div data-testid="alert" transition:fly>
{@html toast.message}
</div>
{/if}
{/each} |
I also run in this issue and the root cause of this issue is that Svelte needs await happyDOM.whenAsyncComplete()
await screen.findByText(`some text`) For vitest and jsdom you need some custom fake for that. I was not able to use a fake timer implementation, but this is a fake implementation which worked with my examples: let original: (callback: FrameRequestCallback) => number
function fakeRaf(fn: FrameRequestCallback): number {
return window.setTimeout(() => fn(Date.now()), 16)
}
export function use() {
original = window.requestAnimationFrame
window.requestAnimationFrame = fakeRaf
}
export function restore() {
window.requestAnimationFrame = original
} Now you need to use the fake in your tests for example use it in the setup and teardown: beforeEach(() => {
rafFaker.use()
})
afterEach(() => {
rafFaker.restore()
}) |
Thank you @Hagendorn. I used the second example you provided and it resolved the issues I had with Vitest and Svelte transitions. It was actually a hell of a process to get down to, as the tests on components using transitions were just failing. As I dug dipper I discovered that the components were stuck in a kind of between state from before and after the transition. I have this component which has a part of the template wrapped in a |
I ran into a similar issue myself, where an element rendered inside of an It seems to me like the problem has something to do with JSDOM's I was able to resolve my issue by stubbing beforeEach(() => {
vi.stubGlobal('requestAnimationFrame', (fn) => {
return window.setTimeout(() => fn(Date.now()), 16);
});
});
afterEach(() => {
vi.unstubAllGlobals();
}); The real head-scratcher here, for me, is that these tests were previously running using JSDOM and Jest without error; it's only in moving to Vitest did this issue present itself. Even if I use the version of JSDOM that Jest was using, rather than a modernized version, this issue remains. So maybe it has something to do with how Vitest sets up JSDOM specifically? I'm honestly not sure yet. The issue is complex enough and touches enough different projects that I'm not sure where exactly to bring this up; I was linked to this issue by @bartektelec from the Svelte Discord, but I'm not sure it's actually a I have a minimal reproduction of my issue that can be found here: https://github.com/alexlafroscia/Svelte-Vitest-Transition-Testing-Bug-Reproduction It contains a failing test around a |
@alexlafroscia your fix is awesome, i can't believe how much time i spent searching for "vitest svelte transitions" before I came to this repo to search the issue tracker |
@austinworks you and me both! It took me hours to get to the bottom of this while transitioning from Jest to Vitest, and I only even got to this point by getting very lucky to find a thread on the Vitest Discord server that sounded similar, and then extra lucky that the author of that thread pointed me in this direction. It's a tricky thing to hunt down a solution to, because I believe the bug is actually the interaction between libraries here. Something about this library+JSDOM+the specific test runner seems to be the problem. For some reason, this all works fine with Jest+JSDOM, using the same version of JSDOM and this library that I'm now using with Vitest. It works fine in Jest but breaks with Vitest. I have no idea why Vitest vs. Jest would matter here; I looked into how both of them instantiate JSDOM and couldn't find any significant difference there 🤷 |
🎉 This issue has been resolved in version 4.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Hello everyone,
I currently have an app which plays some animation before being
initialized
, which in this case is a simple boolean. Depending on this variable, I render different content.So if I have something like this:
and my test looks like this:
The
waitFor
never succeeds. I even tried forcing an animation end withfireEvent.animationEnd
. Here is a minimal reproduction of this issue: https://stackblitz.com/edit/vitest-dev-vitest-whwfuk?file=test/hello.test.tsHope somebody can help and provide a solution for this :) Thanks in advance!
The text was updated successfully, but these errors were encountered: