-
-
Notifications
You must be signed in to change notification settings - Fork 246
Description
I am trying to disable the auto-animate animations in tests and so far the only way I have found is to mock the package like this:
vi.mock('@formkit/auto-animate/vue', () => ({
useAutoAnimate: () => [null, () => {}],
}));This indeed disables the animations, but every time in tests when the animation would happen, it freezes the test for 10 seconds. Is there any better way to disable the animations?
I am using Vitest Browser Mode. Here are my relevant packages:
"dependencies": {
"@formkit/auto-animate": "^0.9.0",
"vue": "^3.5.24",
},
"devDependencies": {
"@vitest/browser": "^4.0.10",
"@vitest/browser-playwright": "^4.0.10",
"@vue/test-utils": "^2.4.6",
"playwright": "^1.56.1",
"vite": "^7.2.4",
"vitest": "^4.0.10",
"vitest-browser-vue": "^2.0.1",
},
This problem only appeared after I updated to Vitest v4. Before that I did not have to disable the animations, the tests seemed to work correctly even without disabling.
EDIT:
The freezing only seems to happen when the element which uses the auto-animation is destroyed during tests.
I am using it like this:
import { useAutoAnimate } from '@formkit/auto-animate/vue';
const [filterValues, enable] = useAutoAnimate();
// Disable animations initially, else there is animation delay if values are changed initially
enable(false);
onMounted(() => {
nextTick(() => {
enable(true);
)
})<div ref="filterValues">
<!-- List elements... -->
</div>Though it seems that the enable(false) does not actually work at all, so maybe this problem is related to that.