Creé un componente React que representa un control giratorio de carga. El componente espera una función 'setShouldLoad' como accesorio. Cada vez que se desplaza la rueda giratoria a la vista, debe llamar a la función 'setShouldLoad' con el valor verdadero. Estoy usando la API de IntersectionObserver para que esto suceda. El código que escribí funciona bien y pude escribir una prueba en Cypress para ello.

También me gustaría escribir una prueba unitaria en broma para que la pruebe. ¿Alguna sugerencia sobre cómo abordar este problema? Actualmente estoy usando la biblioteca de pruebas de reacción.

Aquí está el código para el componente hasta ahora:

 import React, { FC, useEffect, useRef } from "react"; import LoadingSpinner from "../loadingSpinner"; type Props = { setShouldLoad: React.Dispatch<React.SetStateAction<boolean>>; }; const InfiniteScroller: FC<Props> = ({ setShouldLoad }) => { const scrollTriggerElementRef = useRef<HTMLDivElement>(null); useEffect(() => { const loadingSpinner = scrollTriggerElementRef.current!; const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { setShouldLoad(true); } }); observer.observe(loadingSpinner); return () => { observer.unobserve(loadingSpinner); observer.disconnect(); }; }, []); return ( <div ref={scrollTriggerElementRef} className="InfiniteScroller w-full flex justify-center mb-10" > <LoadingSpinner /> </div> ); }; export default InfiniteScroller;

Aquí está el archivo de prueba hasta ahora:

 import React from "react"; import { expect, describe, it } from "@jest/globals"; import { render, fireEvent } from "@testing-library/react"; import InfiniteScroller from "."; describe("InfiniteScroller should work as expected", () => { it("should render without crashing", () => { expect(render(<InfiniteScroller setShouldLoad={() => {}} />)).toBeTruthy(); }); it("should call the setShouldLoad function with true when scrolled into view", () => { const setShouldLoad = jest.fn(); // ??? fireEvent.scroll(loadingSpinner); expect(setShouldLoad).toHaveBeenCalledWith(true); }); });