Branch coverage not getting to 80% and I don't know why

Question

The code coverage is only reaching 75%, and the .html is not helpful at all. I already applied some ignore lines, and still it doesn't wants to work. I'm using React and @testing-library/react.

I just get this from the html:

My component:

import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import Grid from 'components/layout/Grid'
import Divider from 'components/Divider'
import AsyncWrapper from 'utils/AsyncWrapper'

let localStyles = {}
/* istanbul ignore next */
if (process.env.NODE_ENV !== 'production') {
  localStyles = require('./ProfileList.module.sass')
}

const PropTypeProfileListItem = {
  doctorName: PropTypes.string.isRequired,
  specialty: PropTypes.string.isRequired,
  hospital: PropTypes.string.isRequired,
  state: PropTypes.string.isRequired,
  profileLink: PropTypes.string.isRequired,
  profileText: PropTypes.string.isRequired,
  styles: PropTypes.object
}

const ProfileListItem = ({
  styles = localStyles,
  doctorName,
  specialty,
  hospital,
  state,
  profileLink,
  profileText
}) => (
  <Grid>
    <Grid.Row className={styles.doctorname}>{doctorName}</Grid.Row>
    <Grid className={styles.info}>
      <Grid.Row>{specialty}</Grid.Row>
      <Grid.Row>{hospital}</Grid.Row>
      <Grid.Row>{state}</Grid.Row>
    </Grid>
    <Grid.Row>
      <a className={styles.link} href={profileLink}>
        {profileText}
      </a>
    </Grid.Row>
  </Grid>
)
ProfileListItem.propTypes = PropTypeProfileListItem

const ProfileList = ({ profiles, profileText, styles = localStyles }) => (
  <Grid>
    {profiles.map((item, index) => {
      const hasDivider = index < profiles.length - 1
      return (
        <Fragment key={index}>
          <Grid.Row className={styles.item}>
            <ProfileListItem
              profileText={profileText}
              styles={styles}
              {...item}
            />
          </Grid.Row>
          {hasDivider && (
            <Grid.Row>
              <Divider height={3} />
            </Grid.Row>
          )}
        </Fragment>
      )
    })}
  </Grid>
)

ProfileList.propTypes = {
  profiles: PropTypes.arrayOf(PropTypes.shape(PropTypeProfileListItem)),
  profileText: PropTypes.string.isRequired,
  styles: PropTypes.object
}
ProfileList.displayName = 'ProfileList'

export default /* istanbul ignore next */ (process.env.NODE_ENV === 'production'
  ? AsyncWrapper(ProfileList)
  : ProfileList)

My test:

import React from 'react'
import { render } from '@testing-library/react'
import ProfileList from 'components/ProfileList'
import renderer from 'react-test-renderer'

const renderToString = element => renderer.create(element).toJSON()

describe('ProfileList component', () => {
  let profiles
  beforeEach(() => {
    profiles = [
      {
        doctorName: 'Dr. Jedd Wolchok',
        specialty: 'Cardiology',
        hospital: "St. Jude Children's Research Hospital",
        state: 'Memphis, TN, USA',
        profileLink: 'https://google.com'
      },
      {
        doctorName: 'Dr. Seuss',
        specialty: 'Cardiology',
        hospital: "St. Jude Children's Research Hospital",
        state: 'Memphis, TN, USA',
        profileLink: 'https://google.com'
      }
    ]
  })
  test('renders without breaking', () => {
    const { getByText } = render(
      <ProfileList profileText="View profile" profiles={profiles} />
    )
    const text = getByText('Dr. Seuss')
    expect(text).toHaveTextContent('Dr. Seuss')
  })
  test('matches snapshot', () => {
    expect(
      renderToString(
        <ProfileList profileText="View profile" profiles={profiles} />
      )
    ).toMatchInlineSnapshot(`
      <table
        align="center"
        border="0"
        cellPadding="0"
        cellSpacing="0"
        width="100%"
      >
        <tbody>
          <tr>
            <td
              className="item"
            >
              <table
                align="center"
                border="0"
                cellPadding="0"
                cellSpacing="0"
                width="100%"
              >
                <tbody>
                  <tr>
                    <td
                      className="doctorname"
                    >
                      Dr. Jedd Wolchok
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <table
                        align="center"
                        border="0"
                        cellPadding="0"
                        cellSpacing="0"
                        width="100%"
                      >
                        <tbody>
                          <tr>
                            <td
                              className="info"
                            >
                              <table
                                align="center"
                                border="0"
                                cellPadding="0"
                                cellSpacing="0"
                                width="100%"
                              >
                                <tbody>
                                  <tr>
                                    <td>
                                      Cardiology
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      St. Jude Children's Research Hospital
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Memphis, TN, USA
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <a
                        className="link"
                        href="https://google.com"
                      >
                        View profile
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <hr
                className="divider"
                data-testid="divider"
                style={
                  Object {
                    "height": 3,
                  }
                }
              />
            </td>
          </tr>
          <tr>
            <td
              className="item"
            >
              <table
                align="center"
                border="0"
                cellPadding="0"
                cellSpacing="0"
                width="100%"
              >
                <tbody>
                  <tr>
                    <td
                      className="doctorname"
                    >
                      Dr. Seuss
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <table
                        align="center"
                        border="0"
                        cellPadding="0"
                        cellSpacing="0"
                        width="100%"
                      >
                        <tbody>
                          <tr>
                            <td
                              className="info"
                            >
                              <table
                                align="center"
                                border="0"
                                cellPadding="0"
                                cellSpacing="0"
                                width="100%"
                              >
                                <tbody>
                                  <tr>
                                    <td>
                                      Cardiology
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      St. Jude Children's Research Hospital
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Memphis, TN, USA
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <a
                        className="link"
                        href="https://google.com"
                      >
                        View profile
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    `)
  })
})

Answer 1

Maybe you are missing to to match inline snapshot for following piece of code:

{hasDivider && (
  <Grid.Row>
    <Divider height={3} />
  </Grid.Row>
)}