Acabo de empezar a aprender a probar React con Jest y estoy luchando con algo simple. Cuando llamo a userEvent.click(btn), la prueba falla diciendo que userEvent.click() no está definido.
import { render, fireEvent, screen } from "@testing-library/react"; import { userEvent } from "@testing-library/user-event"; import '@testing-library/jest-dom'; import '@testing-library/dom' import { Button } from "./Button"; describe("clicks button", () => { it("onclick", () => { render(<Button />); screen.debug(); let btn = screen.getByTitle("dummyButton"); expect(btn.innerHTML).toBe("Click me"); userEvent.click(btn); btn = screen.getByTitle("dummyButton"); expect(btn.innerHTML).toBe("ButtonClicked"); }); }); export const Button = () =>{ const [buttonText, setButtonText] = useState("Click me") const handleClick = () =>{ setButtonText("ButtonClicked") } return( <div> <button onClick={handleClick} title="dummyButton">{buttonText}</button> </div> ) } ● clicks button › onclick TypeError: Cannot read properties of undefined (reading 'click') 17 | let btn = screen.getByTitle("dummyButton"); 18 | expect(btn.innerHTML).toBe("Click me"); > 19 | userEvent.click(btn); | ^ 20 | btn = screen.getByTitle("dummyButton"); 21 | expect(btn.innerHTML).toBe("ButtonClicked"); 22 | }); at Object.<anonymous> (src/Components/Button/Button.test.js:19:15)Parece que es una exportación predeterminada basada en los documentos:
import userEvent from '@testing-library/user-event'¿Puedes actualizar tu importación e intentarlo de nuevo?
Lo que me solucionó fue npm install @testing-library/user-event@13.5.0
El evento de usuario tiene muchos problemas en mi opinión y no se ha perfeccionado. Tuve que degradar mi versión de npm para que funcionara.
Pruebe el siguiente código. Cambié "eso" a una función de flecha asíncrona y agregué esperar antes de userEvent. Esto funciona para mí. También haga una importación predeterminada en la parte superior.
describe("clicks button", () => { it("onclick", async () => { render(<Button />); screen.debug(); let btn = screen.getByTitle("dummyButton"); expect(btn.innerHTML).toBe("Click me"); await userEvent.click(btn); btn = screen.getByTitle("dummyButton"); expect(btn.innerHTML).toBe("ButtonClicked"); }); });