jest, enzyme - testing a method that returns jsx

Question

I have the following component:

import React, { Component } from 'react';
import {Link, IndexLink} from 'react-router';

class Navbar extends Component {

  renderLinks = (linksData) => {
    return linksData.map((linkData) => {
      if(linkData.to === '/') {
        return(
          <div className="navbar-link-container" key={linkData.to}>
            <IndexLink activeClassName="navbar-active-link" to={linkData.to}>
              <i className="navbar-icon material-icons">{linkData.icon}</i>
              <span className="navbar-link-text">{linkData.text}</span>
            </IndexLink>
          </div>
        )
      }
      else {
        return(
          <div className="navbar-link-container" key={linkData.to}>
            <Link activeClassName="navbar-active-link" to={linkData.to}>
              <i className="navbar-icon material-icons">{linkData.icon}</i>
              <span className="navbar-link-text">{linkData.text}</span>
            </Link>
          </div>
        )
      }
    })
  };

  render() {
    return (
      <div className={`navbar navbar-${this.props.linksData.length}`}>
        {this.renderLinks(this.props.linksData)}
      </div>
    )
  }
}

Navbar.propTypes = {
  linksData: React.PropTypes.array.isRequired,
};

export default Navbar;

Now I am trying to write a unit test that will check the if condition (returning IndexLink or Link depending on the .to property):

But I can't seem to test for the exact jsx return of the function, since when I console.log one of the returns I get this:

{ '$$typeof': Symbol(react.element), type: 'div', key: '/', ref: null, props: { className: 'navbar-link-container', children: { '$$typeof': Symbol(react.element), type: [Object], key: null, ref: null, props: [Object], _owner: null, _store: {} } }, _owner: null, _store: {} }

This is the test I have written so far:

it('renderLinks should return a IndexLink', () => {
    const wrapper = shallow(<Navbar linksData={mockLinksData}/>);
    const renderLinksReturn = wrapper.instance().renderLinks(mockLinksData);
    let foundIndexLink = false;
    renderLinksReturn.map((linkHtml) => {
      console.log(linkHtml);
    });
    expect(foundIndexLink).toBe(true);
  })

Now I do not know what to test against to see if the function is running correctly. Is there a way to 'mount' the return of the function like a component? Or is there a simple method to return a html string of the actual return that I can check against?

Answer 1

To build on top of @Nachiketha 's answer, that syntax won't work when what's returned is a fragment, this can be solved by wrapping the result in a div like:

const renderLinks = shallow(<div>
    {wrapper.instance().renderLinks(mockLinksData)
    </div>
)}

as suggested in this tread.

Answer 2

Faced similar issue where we were passing a jsx component to another component as a prop.

You can shallow render the returned jsx since it's like a valid React Function/Stateless Component. eg:

const renderLinks = shallow(wrapper.instance().renderLinks(mockLinksData))

And continue with your usual enzyme assertions.