0
671
Vistas¿Cómo escribir correctamente la prueba Jest para evitar la advertencia de actuar ()?
useEffect generalmente usa Promesas para el estado de actualización.
Estas actualizaciones causan una advertencia larga en broma: Warning: An update to null inside a test was not wrapped in act(...).
¿Cómo escribir correctamente Jest Test para tal caso?
ejemplo en vivo, ejemplo reproducible:
https://codesandbox.io/s/jest-test-for-useeffect-with-promises-spieq?file=/index.test.js
índice.prueba.js
import React from "react"; import Hello from "./Hello"; import { create, act } from "react-test-renderer"; it("works", () => { let root; act(() => { root = create(<Hello />); }); // console.log("From test:", ); let repr = JSON.stringify(root.toJSON()); expect(repr).toBe('{"type":"span","props":{},"children":["Hello! "]}'); });Hola.js
import React, { useState, useEffect } from "react"; export default () => { const [count, setCount] = useState(); useEffect(() => { Promise.resolve({}).then(() => setCount(4)); }, []); return <span>Hello! {count}</span>; }; 
Actualización 1:
el mismo resultado para uno de propasal:
2 Respuestas
Responde la pregunta0
Me gustaría sugerirle que use testing-library/react , que podría usarse sin problemas con jest y proporcionar métodos asíncronos
Su prueba se convertiría en algo como:
import React from "react"; import Hello from "./Hello"; import { render } from '@testing-library/react'; it("works", () => { const { baseElement } = render(<Hello />); expect(baseElement).toBeTruthy(); });EDITAR : En aras de la exhaustividad, en su ejemplo está tratando de probar si una actualización en su componente ocurrió o no después de un efecto que usa una promesa.
Para esperar algo asíncrono, puede usar el método findBy (los métodos findBy son una combinación de consultas getBy y waitFor).
import React from "react"; import Hello from "./Hello"; import { render, findByText } from "@testing-library/react"; import "@testing-library/jest-dom"; it("works", async () => { const { baseElement } = render(<Hello />); expect(await findByText(baseElement, "Hello! 4")).toBeVisible(); }); Déjame explicarte, import "@testing-library/jest-dom" te permite usar el método toBeVisible
Entonces, esta prueba representa un componente Hola y luego está esperando (con un valor predeterminado, 1000 ms) dentro del elemento base (que es el componente en sí) buscando el texto "¡Hola! 4", luego, si lo encuentra, devolverá el elemento encontrado, que vamos a probar si es visible o no.
0
Parece que esta muestra funciona correctamente.
import React from "react"; import Hello from "./Hello"; import { render, screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; it("works", () => { render(<Hello />); return waitFor(() => screen.getByText("Hello! 4")); // expect(baseElement.toBeTruthy(); });