Empecé a aprender pruebas unitarias en React. Estoy implementando una llamada API simple que representa el nombre de la persona almacenado dentro del estado de datos.

 import React,{useState,useEffect} from 'react' import {Props} from '../../Props/Person.props' import {REACT_APP_CDA_TOKEN,REACT_APP_SPACE_ID,query} from '../../Constants/Query/Person' export const NameComp = () => { const [data,setData]=useState<Props | null>(null); useEffect(()=>{ window.fetch( `https://graphql.contentful.com/content/v1/spaces/${REACT_APP_SPACE_ID}`, { method:"POST", headers:{ 'content-type':'application/json', Authorization:`Bearer ${REACT_APP_CDA_TOKEN}` }, body:JSON.stringify({query}), }).then((response)=>response.json()) .then((json)=>setData(json.data)) },[]) return ( !data ? <div>Loading...</div>: <div> <p className='name'>{data.person.name}</p> </div> ) }

Estoy probando la unidad con el siguiente código.

 import React from 'react' import {shallow} from 'enzyme'; import { NameComp } from '../components/NameComp/NameComp'; describe('Renders Name Component', () => { let container:any; beforeEach(() => { container= shallow(<NameComp/>) }) it('renders a div',() => { expect(container.find('div').length).toEqual(1); }) it('renders a paragraph for name',() => { expect(container.contains('p')).toEqual(true) }) })

Pero el caso final está fallando porque el div de carga se procesa cuando los datos son nulos. Cómo hacer pruebas de tal escenario.

Además, ¿cuál es la mejor manera de aprender pruebas unitarias en React?