Aplicación.js

 import "./styles.css"; import React, { useState } from "react"; import Input from "./Input"; export default function App() { const [value, setValue] = useState(""); return ( <div className="App"> <Input value={value} setValue={setValue} /> </div> ); }

Entrada.js

 import "./styles.css"; export default function Input({ value, setValue }) { return ( <input type="text" data-testid="input-0" value={value} onChange={(e) => { setValue(e.target.value); }} /> ); }

Quiero usar jest y react-testing-library para probar el componente <Input> .

Pero no puedo entender cómo manejar la propuesta de value .

Este es el archivo de prueba que hice, pero no puedo continuar.

 import React, { useState } from "react"; import Input from "@/components/Input/Input"; import userEvent from "@testing-library/user-event"; import { render, screen } from "@testing-library/react"; describe("Testing Input component", () => { it("renders a Input", () => { const mockSetValue = jest.fn(x => {}); render( <Input value={""} setValue={(e) => { mockSetValue(e) }} /> ); userEvent.type(screen.getByTestId("input-0"), "b"); expect(screen.getByTestId("input-0")).toHaveValue("b"); }); });

La prueba devuelve un error después de ejecutarla.

codigosandbox
https://codesandbox.io/s/cariñoso-leftpad-cytmf0?file=/src/Input.jsx:0-219