I created a generic Carousel, and one of the sub components causes errors when I test it with vitest
and @testing-library/react
Here is my sub component that causes errors : (CarouselContent
) :
const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {
const {carouselRef, orientation} = useCarousel();
return (
<div ref={carouselRef} className='flex justify-center overflow-hidden'>
<div
ref={ref}
className={clsx("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
{...props}
/>
</div>
);
});
Here is my test :
import {render, screen} from "@testing-library/react";
import {Carousel, CarouselContent, CarouselItem} from "ui/components/Carousel/Carousel";
it("renders Carousel component and navigates through items", () => {
render(
<Carousel>
<CarouselContent>
<CarouselItem>Item 1</CarouselItem>
<CarouselItem>Item 2</CarouselItem>
<CarouselItem>Item 3</CarouselItem>
</CarouselContent>
</Carousel>
);
[...]
});
If I remove <CarouselContent>
it works. But of course, I need it later in my web pages.
Here is the errors I get :
FAIL src/__tests__/components/Carousel/Carousel.test.tsx > renders Carousel component and navigates through items
Unknown Error: Error: Uncaught [TypeError: undefined is not a function]
FAIL src/__tests__/components/Carousel/Carousel.test.tsx > renders Carousel component and navigates through items
Unknown Error: Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.%s
Vitest caught 2 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
Error: Should not already be working.