Testing that a specific link exists within nested divs using React, Enzyme, Jest

3
votes

I have some links rendered into a sidebar, header, etc. I'm writing some tests to ensure they exists, get rendered and so forth. All that is working fine.

I want to ensure that the links are being rendered in the correct div with the proper location links.

Example Header Component

    <div className="pull-right" id="navbarsExampleDefault">
      <ul className="navbar-nav mr-auto">
          {props.links.map((link, i) => {
            return (
              <li key={`HEADER_${i}`} className="nav-item hdr">
                <NavLink exact className='nav-link' activeClassName='nav-link active' to={`${link.location}`}>
                  {link.title}
                </NavLink>
              </li>
            )
          })}
      </ul>
    </div>

This object is getting passed in as a prop to iterate over:

let headerLinkProp = [
        { title: "Dashboard", location: "/"},
        { title: "Budget", location: "/editBudget"},
        { title: "Virtual Accounts", location: "/viewAccounts"}]

My end goal is to ultimately say.. There exists a link within nav-item hdr in which that link has a title of X and a link href of Y.

I have little snippets like:

expect(wrapper.find('.sb').children()).toHaveLength(3)

That count the number of children within the .sb class, but hoping to dive deeper.

1
javascriptreactjsunit-testingjestjsenzyme

1 Answers

4
votes

You should try something like this:

let headerLinkProp = [
        { title: "Dashboard", location: "/"},
        { title: "Budget", location: "/editBudget"},
        { title: "Virtual Accounts", location: "/viewAccounts"}]

expect(wrapper.find('.sb').children()).toHaveLength(3);
wrapper.find('.nav-link').forEach((node, index) => {
  expect(node.text()).to.equal(headerLinkProp[index].title);
  expect(node.prop('to')).to.equal(headerLinkProp[index].location);
});