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" +

Testing

+

+ 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. +

+

Setup with Vitest:

+ +

+ 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: +

+

Mocking the auto-animate Hook on Jest

+ + + Your Jest config should includes the path of your mock, on this example + it looks like this:
+ modulePaths: ["<rootDir>/jest"] +
+

Solid Primitive

Solid users can use the function createAutoAnimate by