En un componente determinado, me estoy burlando de una llamada a la API que devuelve algunas marcas para un documento HTML. Logré que el simulacro funcionara y se devolviera la respuesta simulada, pero mi componente no puede establecer el estado con esta respuesta. Así es como se ve.

 export const RetrieveContent = (props: Props) => { const [content, setContent] = useState < Partial < ContentViewModel >> {}; useEffect(() => { const requestContent = async (props: Props) => { const { id } = props; const data = await getContent(id); // console.log(data) <-- This logs the object correctly! setContent(data); }; requestContent(props); }, []); return <>{parse(content.contentObject.content.body)}</>; // content is an empty object here };

Después de llamar a setState , el estado sigue siendo un objeto vacío. La prueba es bastante simple.

 cconst server = setupServer( rest.get('/content/*', (req, res, ctx) => { return res(ctx.json(ContentViewModelMock)) }) ) describe('<Content /> tests', () => { beforeAll(() => server.listen()) beforeEach(() => server.resetHandlers()) afterAll(() => server.close()) test('should display content when the id is found', async () => { const { asFragment } = render(<Content id={`${faker.datatype.uuid}`} />) console.log(asFragment().textContent) // This returns nothing }) })