Skip to content

Tests freezing for 10 seconds when package is mocked #230

@os-tohe

Description

@os-tohe

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions