TypeError: Cannot read property 'showPrev' of undefined while writing unit test cases in enzyme

Question

I am writing unit tests using jest and enzyme to test my functional component. I am just checking whether the div is getting rendered or not, but I get the error:

TypeError: Cannot read property 'showPrev' of undefined 

Here is my component:

    import React from "react";
import Notification from "../../components/Notification/Notification";
import {Spinner} from "@vmware-react/clarity/dist/spinner"; 
import {  get, appConfig, getFeatureFlagValue } from "../../helpers";

import "./ActionButtons.css";
const ActionButtons = ({actionButtonsManager, onDraft, onCancel, onPrev, onNext, onSubmit, error, currentFormType, ffClient }) => {
    const {
        showPrev,
        showNext,
        showDraft,
        showCancel,
        showSubmit,
        customButtons,
        disableNext,
        disableDraft,
        disableCancel,
        disableSubmit,
        draftLoading,
        showSpinner = false
    } = actionButtonsManager;
    const hasCustomButtons = customButtons !== null;
    console.log(showPrev);

    const CSP_FEATURE_FLAGS = get(appConfig, "CSP_FEATURE_FLAGS", "");
    const { SAVEDRAFT_FEATURE } = CSP_FEATURE_FLAGS;
    const savedraft_ff = getFeatureFlagValue(ffClient, SAVEDRAFT_FEATURE);

    const addSpinner = () => <div className="show-spinner"> <Spinner size="sm"/> </div>;
    
    const renderError = () =>{
        const {isError, errorMessage, errorFromWhere} = error;
        if(isError && errorFromWhere === "fromDraft"){
            return (
                <div className="action-button-error">
                    <Notification type={"warning"} text={errorMessage} />
                </div>
            );
        }
        return null;
    };
    return (
        <div className="action-buttons-wrapper">
            {
                showPrev &&
                <clr-icon shape="arrow" dir="left" size="30" role="button" onClick={onPrev}></clr-icon>
            }
            <div className="right-section">
                {
                    renderError()
                }
                {
                    !hasCustomButtons &&  showDraft && ((savedraft_ff && currentFormType === "update")|| currentFormType !== "update" ) &&
                    <button className="btn btn-outline" type="button" onClick={onDraft} disabled={disableDraft || draftLoading}>{draftLoading ? "Saving" : "Save As Draft"}</button>
                }
                {
                    !hasCustomButtons &&  showCancel &&
                    <button className="btn btn-outline" type="button" onClick={onCancel} disabled={disableCancel}>Cancel</button>
                }
                {
                    !hasCustomButtons &&  showNext &&
                    <button className="btn btn-primary" type="button" disabled={disableNext} onClick={onNext}>Next</button>
                }
                {
                    !hasCustomButtons &&  showSubmit &&
                    <button className="btn btn-primary" type="button" disabled={disableSubmit} style={showSpinner ? {background: "inherit", display: "inline-block"}: null } onClick={onSubmit}>{ showSpinner ? addSpinner() : null} Submit</button>
                }
                {
                    hasCustomButtons && customButtons()
                }
            </div>
        </div>
    );
    };

export default ActionButtons;

Here is my test case:

    import React from "react";
    import { shallow } from "enzyme";
    import ActionButtons  from "./ActionButtons";
    
    const defaultProps ={
        onDraft: false, 
        onCancel: true,
        onPrev: true,
        onNext: true,
        onSubmit: true,
        error:false,
        currentFormType:[], 
        actionButtonsManager:[
            {
                showPrev:false,
                showNext:false,
                showDraft:false,
                showCancel:true,
                showSubmit:true,
                customButtons:[],
                disableNext:true,
                disableDraft:true,
                disableCancel:false,
                disableSubmit: false,
                draftLoading: true,
                showSpinner : false
            }
        ]
    };
    
    
    describe("Action Buttons", ()=>{
        it("Action Buttons are rendered", ()=>{
            const wrapper=shallow(<ActionButtons {...defaultProps}/>
            expect(wrapper).toMatchSnapshot();
expect(wrapper.find(".action-buttons-wrapper")).toExist();
        });
    });
    

I am not able to understand how I need to pass the props in the test file. The error says "Cannot read property 'showPrev' of undefined ", It is not only finding the element itself and hence it is taking undefined. Can someone please point out the mistake here and suggest a way out?

Answer 1

In the test file default props has actionButtonManager , instead of actionButtonsManager.