Я не могу сделать шутку функционального тестирования вообще. Вот мой компонент:

Question

Я изо всех сил пытаюсь провести функциональное тестирование, используя шутки и энзимы.

когда я пишу тестовые случаи, он всегда возвращает NULL.

Функция, над которой я издеваюсь, всегда возвращает NULL.

Я пытался, так что, может быть, примеры для шпионажа или насмешек над функциями, но все равно я получу ошибки.

в основном мне нужно вызвать это onClickButtonNext в Jest.

class ProfileType extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedProfileType: ''
        }
    }

    componentDidMount() {
        this.setState({ selectedProfileType: this.props.profileType });
        this.props.setWorkflowDirty();
    }

    onClickButtonNext = () => {
        this.props.onClickNext({ profileType: this.state.selectedProfileType });
    }

    onClickButtonCancel = () => {
        this.props.onClickCancel();
    }

    render() {
        const menus = ["Contact"];

        const profileOptions = ProfileTypes.map((profile, i) => {
            profile.selected = this.state.selectedProfileType === profile.name;
            return (
                <IconCard key={i} profile={profile} index={i} type="radio" onSelectProfile={() => this.setState({ selectedProfileType: profile.name })} />
            )
        }
        );

        return (
            <ScreenCover isLoading={this.props.isLoading}>
                <CoreoWizScreen menus={menus} activeFlowId={0} isNextDisabled={this.state.selectedProfileType === '' || this.state.selectedProfileType === 'Guardian'} onNextClick={this.onClickButtonNext} onCancelClick={this.onClickButtonCancel}>
                    <div className="container-fluid mainContent px-5 d-flex align-items-start flex-column">
                        <div className="row d-block">
                            <div className="col-md-12 py-5 px-0">
                                <h4 className="font-weight-normal mb-4">Select My Profile Type</h4>
                                <PanelCard>
                                    {profileOptions}
                                </PanelCard>
                            </div>
                        </div>
                    </div>
                </CoreoWizScreen>
                <CoreoWizFlow coreoWizNavigationData={CoreoWizNavigationData} activeFlowId={0} />
            </ScreenCover>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onClickCancel: () => dispatch(onCancelClick()),
        onClickNext: (data) => dispatch(onProfileTypeNext(data)),
        setWorkflowDirty: () => dispatch(setWorkflowDirty())
    }
}

function mapStateToProps(state) {
    return {
        profileType: state.onboardingState.profileData.profileType,
        isLoading: state.onboardingState.loading
    }
}

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


test.js

    it('ProfileType', () => {
      let wrapper = shallow(<ProfileType/>);
      wrapper.instance().onClickButtonNext = jest.fn();
      wrapper.update();
      wrapper.instance().onClickButtonNext;
      expect(wrapper.instance().onClickButtonNext).toHaveBeenCalled;
}

это не работает вообще. Пожалуйста, помогите мне !!!