TypeError：尝试将undefined属性包装为函数：使用箭头函数时

Question

您好我是React和Redux的新手，我正在尝试使用酶创建测试。我的问题是，当我声明一个箭头函数进行测试时，我的测试失败了，但是当我使用JSX语法声明一个函数时，它会通过。我不知道为什么？欢迎任何帮助我在下面发布了我的代码，以显示失败和通过测试之间的示例。谢谢

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失败

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传递

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 ) );