Esta es una continuación de esta pregunta . Hice algunos cambios que simplifican la pregunta (creo) y la cambian drásticamente.
He separado la creación del gancho y la inicialización de eventos midi.
describe("midiConnection", () => { it("Should fail", () => { const midiPorts = renderHook(() => { return MidiConnection()}) act(() => { midiPorts.result.current.enable() }) console.log(midiPorts.result.current.error) }) }) export function MidiConnection() { const {array: midiInputs, push: midiPush, filter: midiFilter} = useArray(["none"]) const [error, setError] = useState<Error | undefined>(); function enable() { WebMidi.addListener("connected", (e) => { if (isInput(e)) {midiPush(e.port.name)}}); WebMidi.addListener("disconnected", (e) => { e.port.removeListener() if (isInput(e)) {midiFilter((str) => {return str != e.port.name})} }); // setError("this is a test") WebMidi. enable(). catch((err) => { // console.log("test") // setError(err) }) } return ({ports: midiInputs, error, enable}) }la advertencia es todavía;
Warning: An update to TestComponent inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ Además de separar parte de la lógica, también experimenté colocando setError() en otras líneas para ver si puedo activar la advertencia (los comentarios comentados).
Parece que la advertencia solo se activa cuando intento actualizar el estado cuando se rechaza la promesa de enable() .
¿Qué puedo hacer para que no suceda este error?
EDITAR: he creado una réplica funcional de esto en CodeSandbox , que verá si va a las pruebas y mira la consola.
Su enlace es asíncrono, por lo que debe esperar la próxima actualización. Aquí están los documentos que hablan más al respecto .
import { renderHook, act } from "@testing-library/react-hooks/dom"; import CHook from "./../hook/CHook"; test("This is a test", async () => { const { result, waitForNextUpdate } = renderHook(() => CHook()); act(() => { result.current.update(); }); await waitForNextUpdate(); console.log(result.current.error); });