Tengo un componente que activa una llamada de función cada vez que se realiza una interacción de deslizamiento. Esta interacción de deslizamiento puede ejecutarse mediante touchEvent o mouseEvent. Mi objetivo era comprobar si se invocaba la función cada vez que se producía un deslizamiento. Pero no logro simular el evento táctil en una prueba de broma . Usando swiper, react, react-testing-library y jest.

Enlace del editor en línea para probar: Codesandbox

la clase real

 const App = ({ funcCalledOnSlideChange }) => { return ( <Swiper pagination={{ clickable: true }} modules={[Pagination]} watchOverflow onSlideChange={funcCalledOnSlideChange} > <SwiperSlide> <img className="slide" /> </SwiperSlide> <SwiperSlide> <img className="slide-second" /> </SwiperSlide> </Swiper> ); };

Y la prueba real

 const mockFunc = jest.fn(); function sendTouchEvent({ x, y, element, eventType }) { const touchObj = new Touch({ identifier: Date.now(), target: element, clientX: x, clientY: y, radiusX: 2.5, radiusY: 2.5, rotationAngle: 10, force: 0.5 }); const touchEvent = new TouchEvent(eventType, { cancelable: true, bubbles: true, touches: [touchObj], targetTouches: [], changedTouches: [touchObj] }); element.dispatchEvent(touchEvent); } test("should swipe by touch event", async () => { const { container } = render(<App funcCalledOnSlideChange={mockFunc} />); const swiperSlide = container.querySelector(".swiper-slide"); act(() => { sendTouchEvent({ x: 350, y: 100, element: swiperSlide, eventType: "touchstart" }); sendTouchEvent({ x: 200, y: 100, element: swiperSlide, eventType: "touchmove" }); sendTouchEvent({ x: 150, y: 100, element: swiperSlide, eventType: "touchend" }); }); await waitFor(() => { expect(mockFunc).toBeCalled(); }); });

Error real:

 Failed to construct 'Touch': Failed to read the 'target' property from 'TouchInit': Failed to read the 'target' property from 'TouchInit': Required member is undefined.