diff --git a/docs/src/examples/jest-react-hook/index.ts b/docs/src/examples/jest-react-hook/index.ts
new file mode 100644
index 0000000..ee1fc58
--- /dev/null
+++ b/docs/src/examples/jest-react-hook/index.ts
@@ -0,0 +1,11 @@
+export default {
+ react: {
+ example: `
+const useAutoAnimate = () => [null];
+export { useAutoAnimate };
+ `,
+ language: "jsx",
+ title: "jest/__mocks__/@formkit/auto-animate/react.js",
+ ext: "jsx",
+ },
+}
diff --git a/docs/src/examples/vitest/index.ts b/docs/src/examples/vitest/index.ts
new file mode 100644
index 0000000..f94f74a
--- /dev/null
+++ b/docs/src/examples/vitest/index.ts
@@ -0,0 +1,18 @@
+export default {
+ react: {
+ example: `
+ import { vi } from 'vitest'
+
+ const ResizeObserver = vi.fn(() => ({
+ observe: vi.fn(),
+ unobserve: vi.fn(),
+ disconnect: vi.fn()
+ }))
+
+ vi.stubGlobal('ResizeObserver', ResizeObserver)
+ `,
+ language: "js",
+ title: "setup.js",
+ ext: "js",
+ },
+}
diff --git a/docs/src/sections/SectionUsage.vue b/docs/src/sections/SectionUsage.vue
index 73a0f3a..7c890ec 100644
--- a/docs/src/sections/SectionUsage.vue
+++ b/docs/src/sections/SectionUsage.vue
@@ -21,6 +21,8 @@ import ActualVueApp from "../examples/vue/ActualVueApp.vue"
import ActualVueAppHook from "../examples/vue/ActualVueAppHook.vue"
import ActualAngularApp from "../examples/angular/ActualAngularApp.vue"
import ActualDisable from "../examples/disable/ActualDisable.vue"
+import Vitest from '../examples/vitest/index.ts'
+import jestReactHook from "../examples/jest-react-hook"
import IconReact from "../components/IconReact.vue"
import IconVue from "../components/IconVue.vue"
import IconAngular from "../components/IconAngular.vue"
@@ -143,6 +145,34 @@ import IconSolid from "../components/IconSolid.vue"
+ For now, if you're trying to use auto-animate with tests, you might face + some difficulties along the way due to two main problems. One is because + tools like Vitest and Jest use JSDom to emulates the browser, and some DOM + features that auto-animate uses don't yet exist in the JSDom package. + For these cases, we can mock the respective resources in our test setup, + like this example using Vitest, but you can do the same with any test framework. +
++ The second issue is with some other testing tools that cannot handle ES Modules, such as Jest. + In that case we can try to configure your project to handle ESM, and then + you won't face these problems. +
++ But if you have some problems with this setup, because Jest's own support + for ESM is an experimental feature, you can mock the entirely auto-animate hook: +
+modulePaths: ["<rootDir>/jest"]
+
Solid users can use the function createAutoAnimate
by