Tengo este componente que se encarga de mostrar un mensaje de actualización.
import React from 'react'; import { Typography } from '@material-ui/core'; import { DateTime } from 'luxon'; const LastUpdatedTime = ({ recordedOn }) => { if (!recordedOn) { return <></>; } const date = DateTime.fromMillis(recordedOn).toLocaleString(); return ( <> <Typography data-testid="caption" style={{ color: '#757575' }} variant="caption"> {`Last recorded on`} </Typography> <Typography data-testid="date" style={{ color: '#757575' }} variant="body2"> {`${date}`} </Typography> </> ); }; export default LastUpdatedTime; Quiero probar este componente basado en el valor de accesorios que está recordedOn y mis pruebas hasta ahora son así
import React from 'react'; import { render } from '@testing-library/react'; import LastUpdatedTime from './index' describe('<LastUpdatedTime />' ,()=>{ it('should render the date message',()=>{ const { getByTestId} = render(<LastUpdatedTime recordedOn={1645109616314} />) const captionEl = getByTestId("caption") expect(captionEl.textContent).toBe('Last recorded on') }) it('should render the date provided from the component',()=>{ const {getByTestId} = render(<LastUpdatedTime recordedOn={1645109616314} />) const dateEl = getByTestId("date") expect(dateEl.textContent).toBeTruthy() }) it('should render nothing if there was no recordedOn time provided' ,()=>{ const {getByTestId} =render(<LastUpdatedTime recordedOn={1645109616314} />) const dateEl = getByTestId("date") expect(dateEl).toBeNull() }) }) Mi problema es que en la tercera prueba should render nothing if there was no recordedOn time provided
¿Como hacer eso?