Tengo este código y la prueba de ejecución de npm me da un problema con la cobertura. Veo el html de cobertura y veo que mi deconstrucción, url='' aparece en amarillo.
Veo el problema y puedo ver esto:
function Team(props) { const { team } = props; const { url = '', //this element appear in yellow, so is not being testing. } = team; const context = useAppContext(); const { sportEvent, protocol } = getProperties(context); const { arcSite, outputType } = context; const basePath = getBasePath(context); const infoTeamPicture = translateMessage({ arcSite, id: 'infoCard.infoTeamPicture', defaultMessage: 'Escudo/Bandera equipo' }); const initPath = getInitPath(team, protocol, basePath); return ( outputType === 'amp' ? <TeamAmp infoTeamPicture={infoTeamPicture} team={team} initPath={initPath}/> : <figure className="ext ext-ic ext-ic--team"> <div className="ext-ic__wr" {...getDTMRegion(ACTIVITY_MAP_NAME)}> <a href={`${initPath}${url}`} className="ext-ic__img"> <img src={`${sportEvent.host}${team.image60}`} alt={infoTeamPicture} width="80" height="80" /> </a> <div className="ext-ic__inf"> <a href={`${initPath}${url}`} title={team.shortName} className="ext-ic__tl"><span>{team.shortName}</span></a> <InfoList team={team} /> </div> <InfoButtons protocol={protocol} info={team} initPath={initPath}/> </div> {team.competition && <Competition competition={team.competition} />} </figure> ); }Intento crear una nueva prueba como:
it('no render url', () => { const specificTeams = { shortName: 'Real Madrid', country: 'España', url: '', urlTag: 'as.com/m/tag/real_madrid/a?omnil=src-app', image60: '/img/comunes/fotos/fichas/equipos/small/2x/1.png', image100: '/img/comunes/fotos/fichas/equipos/large/1.png', elementType: 'team', competition: { name: 'LaLiga Santander 2020/2021', normalized: 'primera', standing: [], nextGames: {}, }, }; const instance = shallow(<Team team={specificTeams}/>); expect(specificTeams.url).toEqual('') });pero no logro que la cobertura llegue al 100%. ¿Alguien puede ayudarme a entender cómo probar este tipo de cosas? Gracias
Encontré una solución que funciona. En mi caso, necesito pasar un objeto vacío en mi prueba, para verificar el objeto vacío que está en el código real.
Así:
it('no render url', () => { const specificTeams = { url: '', }, }; const instance = shallow(<Team team={specificTeams}/>); expect(instance).toBeDefined(); });La otra forma de hacer esto sería simplemente pasar el objeto totalmente vacío, pero a veces la prueba podría enviarle un error. Un mensaje indefinido sobre el objeto.