Adding a Jest Section to the docs

[ArthurPedroti]

Context: #29

@justin-schroeder

Justin, I added a section about how to mock the autoAnimate function and hook with Jest as you suggest.

Make sure the language and approach match the tone of all documentation. If you have any suggestions or want to change something, feel free to do it.

Preview:

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
auto-animate	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 1, 2023 7:33pm

[justin-schroeder]

Directionally I think this is correct, although it is a bit of a solution to a specific use case. Here’s what I mean:

• Some people have issues with importing @formkit/auto-animate/react because of Jest’s lack of ESM, however other people who have their environment setup to accept ESM property wont have this issue and dont need to mock at all.
• The secondary issue is in JSDom not in Jest (ResizeObserver is not in JSDom) , so any testing utility that uses JSDom will suffer the same issue (like Vitest).
• The solution mocks all of auto animate rather than mocking the underlying JSDom implementation. This works, but does reduce the testing surface area.

Some thoughts and possible solutions:

Although Jest is super popular new "hot" testing packages are growing quickly, so I'm not sure a section specific to Jest is necessary here.

So perhaps instead of a top-level section specific to Jest we could rename this "Testing" and explain the ESM limitation of Jest and the JSDom limitation along with a possible mocking options, including the one you’ve provided.

Thoughts?

[ArthurPedroti]

Alright @justin-schroeder , one of my questions was whether to create a main section or a subsection about this, I understand your point about Jest being a "hot" and popular package, and we might not need that section soon, so yes, it's better to just create a subsection really.

I'll rewrite the section focusing on the JSDom issue and try to embrace more packages that use JSDom and have the same problem.

And finally, create other examples mocking just the JSDom implementation than all the auto animate as you suggest.

What do you think?

[justin-schroeder]

This sounds like great idea @ArthurPedroti — I’ll happily accept that PR.

[ArthurPedroti]

Hey @justin-schroeder

I moved the Jest section to the React Usage section and first I described the JSDom problem and how to handle it, and follow I explain the ESM problem with Jest.

Even though I set up my Jest project with the ESM as the documentation of Jest says, I faced some problems and couldn't get it to work. So I maintain the example of the entirely mock of the auto-animate.

I know this is not the ideal and the best approach is mock like the Vitest example, but I think Jest has some problems yet to really handle with ESM, but as you said, I think soon the example can be outdated (https://github.com/jestjs/jest/issues/9430), but someway, can be helpful to who don't want to update your Jest setup for now.

[david-cord]

On this theme, have any of you encountered issues with the following error when testing components using this auto-animate whilst testing with vitest:

Error: Uncaught [TypeError: el.animate is not a function]

[brachkow]

If somebody stuck with ResizeObserver issue

vi.mock('@formkit/auto-animate/vue', () => ({
  useAutoAnimate: () => [null],
}));

does the job.