TypeError: Attempted to wrap undefined property as function: when using arrow functions

Question

Hi I am new to React and Redux, I am trying to create tests using enzyme. My issues is that when I declare an arrow function to test against, my test fails, but when I declare a function using JSX syntax it passes. I am not sure why? Any help is welcomed I posted my code below to show an example between fail and pass tests. Thank you

BusinessDetails.test.js

import React from 'react';
import { Provider } from 'react-redux';
import { Route, Switch, Router } from 'react-router';
import { mount, shallow } from 'enzyme';
import { expect } from 'chai';
import sinon, { spy } from 'sinon';

import store, { history } from '../../store';
import ConnectedBusinessDetails, { BusinessDetails } from './index';

describe('BusinessDetails', () => {

        it('calls componentDidMount', () => {
            spy(BusinessDetails.prototype, 'componentDidMount');
            const wrapper = shallow(<BusinessDetails fetchDetails={ ()=> {} }/>);

            expect(BusinessDetails.prototype.componentDidMount.calledOnce).to.equal(true);
        });

        it('calls renderDetails', () => {
            spy(BusinessDetails.prototype, 'renderDetails');
            const wrapper = shallow(<BusinessDetails fetchDetails={ ()=> {} }/>);
            expect(BusinessDetails.prototype.renderDetails.calledOnce).to.equal(true);
        });

});

index.js fails

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import { fetchDetails } from './api';

export class BusinessDetails extends Component {
    componentDidMount() {
        this.props.fetchDetails();
    }

    renderDetails = () => {
        if ( this.props.businessDetails && Object.keys( this.props.businessDetails ).length ){
            const info = Object.values( this.props.businessDetails )[ 2 ];
            const mapped = info.map( ( item, i ) => <li key={ i }> { item.title } </li> );
            return mapped;
        }
    };

    render() {
        return(
            <ul>
                { this.renderDetails() }
            </ul>
        );
    }
}

const mapStateToProps = state => ({ businessDetails: state.businessDetails.data });

const mapDispatchToProps = dispatch => bindActionCreators( { fetchDetails }, dispatch );

export default withRouter( connect( mapStateToProps, mapDispatchToProps )( BusinessDetails ) );

index.js pass

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import { fetchDetails } from './api';

export class BusinessDetails extends Component {
    componentDidMount() {
        this.props.fetchDetails();
    }

    renderDetails(){
        if ( this.props.businessDetails && Object.keys( this.props.businessDetails ).length ){
            const info = Object.values( this.props.businessDetails )[ 2 ];
            const mapped = info.map( ( item, i ) => <li key={ i }> { item.title } </li> );
            return mapped;
        }
    };

    render() {
        return(
            <ul>
                { this.renderDetails() }
            </ul>
        );
    }
}

const mapStateToProps = state => ({ businessDetails: state.businessDetails.data });

const mapDispatchToProps = dispatch => bindActionCreators( { fetchDetails }, dispatch );

export default withRouter( connect( mapStateToProps, mapDispatchToProps )( BusinessDetails ) );