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?

score 0 · Answer 1 · answered Jul 07 '22 at 10:31

0

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

answered Jul 07 '22 at 10:31

novice

446
2
5
18

Rectified it, Still, I get the same error. – Gareema Jul 07 '22 at 10:40
the unit test has `actionButtonsManager` defined as array of object whereas in the component it's just an object – novice Jul 07 '22 at 10:43
And I would suggest using PropTypes, to avoid such issues – novice Jul 07 '22 at 10:46
I am not allowed to make any changes in the component. I need to write the test cases only. – Gareema Jul 07 '22 at 12:00
actionButtonsManager in default props should be an object rather than an array of objects like this : actionButtonsManager:{ showPrev : false , ... } rather than actionButtonsManager:[{ showPrev : false , ... } ] – novice Jul 07 '22 at 13:54

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

1 Answers1