I have this code, and the npm run test give me a problem with the coverage. I see the coverage html and i see that my deconstruction, url='' appear in yellow.

I see the problem and i can see this:

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>
        {teampetition && <Competition petition={teampetition} />}
      </figure>
  );
}

I try to create a new test like:

it('no render url', () => {
    const specificTeams = {
      shortName: 'Real Madrid',
      country: 'España',
      url: '',
      urlTag: 'as/m/tag/real_madrid/a?omnil=src-app',
      image60: '/img/unes/fotos/fichas/equipos/small/2x/1.png',
      image100: '/img/unes/fotos/fichas/equipos/large/1.png',
      elementType: 'team',
      petition: {
        name: 'LaLiga Santander 2020/2021',
        normalized: 'primera',
        standing: [],
        nextGames: {},
      },
    };
    const instance = shallow(<Team team={specificTeams}/>);
    expect(specificTeams.url).toEqual('')
  });

but i can not achieve that the coverage arrive to 100%. Someone can help me to understand how to test this kind of things? Thanks

I have this code, and the npm run test give me a problem with the coverage. I see the coverage html and i see that my deconstruction, url='' appear in yellow.

I see the problem and i can see this:

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.petition && <Competition petition={team.petition} />}
      </figure>
  );
}

I try to create a new test like:

it('no render url', () => {
    const specificTeams = {
      shortName: 'Real Madrid',
      country: 'España',
      url: '',
      urlTag: 'as./m/tag/real_madrid/a?omnil=src-app',
      image60: '/img/unes/fotos/fichas/equipos/small/2x/1.png',
      image100: '/img/unes/fotos/fichas/equipos/large/1.png',
      elementType: 'team',
      petition: {
        name: 'LaLiga Santander 2020/2021',
        normalized: 'primera',
        standing: [],
        nextGames: {},
      },
    };
    const instance = shallow(<Team team={specificTeams}/>);
    expect(specificTeams.url).toEqual('')
  });

but i can not achieve that the coverage arrive to 100%. Someone can help me to understand how to test this kind of things? Thanks

• javascript
• reactjs
• unit-testing
• testing

2 Answers 2

You can use JSON.stringify for that, because it will return '{}' string. And unit test will be:

expect(JSON.stringify(someObject)).toBe('{}');

i did find a solutions that works. In my case, i need to pass an empty object in my test, to check the empty object that is in the real code.

Just like that:

it('no render url', () => {
    const specificTeams = {          
      url: '', 
      },
    };
    const instance = shallow(<Team team={specificTeams}/>);
     expect(instance).toBeDefined();
  });

The other way to do this, would be just pass the object totally empty, but sometimes the test could send you an error. An undefined message about the object.