Test coverage very low due to these code "campaignGroupListing.findIndex((item) => item.id === parseInt(id)); campaignGroupListing.splice(index, 1);

问题

i am new in react can any one help us to write unit test code for below react code & basically i write test case for this below code but statement & functions coverage very low due to these code campaignGroupListing its is arrray of object in this code i find matching data and updated id record append in a new array ."campaignGroupListing.findIndex((item) => item.id === parseInt(id)); campaignGroupListing.splice(index, 1); campaignGroupListing.splice(index, 0, newArr); "

import React, { useState, forwardRef, useImperativeHandle } from 'react';
    import {
      Wizard,
      useToast,
      Button,
      Analytics,
      Dialog,
    } from '@dentsu-ui/components';
    import CampaignGroupDetails from './Details';
    import SelectCampaigns from './Campaigns';
    import PreviewDetails from './Preview';
    import GroupingCMS from 'cms/Grouping';
    
    const CampaignGrouping = forwardRef((props, ref) => {
      const { campaignGroupList, updateGroupListData } = props;
      const [id, setId] = useState(undefined);
      let totalCampaigns = [];
      let selectedGroup = [];
      const campaignGroupListing = JSON.parse(
        localStorage.getItem('campaignGroupData'),
      );
    console.log("campaignGroupListing",campaignGroupListing)
      if (id === undefined || id === '') {
      } else {
        selectedGroup = campaignGroupListing.filter(
          (obj) => obj.id === parseInt(id),
        );
        if (selectedGroup.length > 0) {
          totalCampaigns = selectedGroup[0].campaignNumber;
        }
      }
    
      const [widgetStep, widgetStepCount] = useState(0);
    
      const [isOpen, setIsOpen] = useState(false);
      const [dialogOpen, setDialogOpen] = useState(false);
      const [btnDisabled, setBtnDisabled] = useState(true);
      const [selectedCampaigns, setSelectedCampaigns] = useState([]);
      const [forceCall, setForceCall] = useState(false);
    
      useImperativeHandle(ref, () => {
        return {
          setId: setId,
          setIsOpen: setIsOpen,
        };
      });
    
      const [inputState, setInputState] = useState({
        nameSelectedVal: '',
        desSelectedVal: '',
        goalSelectedVal: '',
        kpiSelectedVal: '',
      });
    
      const {
        dialog: { dialogText },
        paragraph: { NoCampaignExist },
      } = GroupingCMS;
    
      let campaignGroupData = campaignGroupList;
      console.log('campaignGroupData', campaignGroupListing);
      let campaignList = props.campaignList;
    
      const removeCampaignGroup = () => {
        setInputState({
          nameSelectedVal: '',
          desSelectedVal: '',
          goalSelectedVal: '',
          kpiSelectedVal: '',
        });
      };
      const getActiveIndex = (i) => {
        widgetStepCount(i);
      };
    
      const toast = useToast();
      const updateCampaignGroup = async (id) => {
        let newArr = {
          id: parseInt(id),
          campaignGroupName:
            inputState.nameSelectedVal === ''
              ? selectedGroup[0].campaignGroupName
              : inputState.nameSelectedVal,
    
          campaignNumber: selectedCampaigns,
          goal:
            inputState.goalSelectedVal === ''
              ? selectedGroup[0].goal
              : inputState.goalSelectedVal,
          kpi:
            inputState.kpiSelectedVal === ''
              ? selectedGroup[0].kpi
              : inputState.kpiSelectedVal,
          desc:
            inputState.desSelectedVal === ''
              ? selectedGroup[0].desc
              : inputState.desSelectedVal,
          dailySpend: selectedCampaigns.length === 0 ? 0 : 450,
          createdAt: await new Date().toLocaleDateString('en-gb', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
          }),
          createdBy: JSON.parse(localStorage.getItem('okta-token-storage')).idToken
            .claims.name,
          dailySpendofTotal: selectedCampaigns.length === 0 ? 0 : 12,
        };
    
        const index = campaignGroupListing.findIndex(
          (item) => item.id === parseInt(id),
        );
        campaignGroupListing.splice(index, 1);
        campaignGroupListing.splice(index, 0, newArr);
    
        localStorage.setItem(
          'campaignGroupData',
          JSON.stringify(campaignGroupListing),
        );
        await setIsOpen(false);
        updateGroupListData(campaignGroupListing);
        toast({
          duration: 2000,
          position: 'top-right',
          status: 'success',
          title: 'Campaign group has been created successfully',
        });
        setInputState({
          nameSelectedVal: '',
          desSelectedVal: '',
          goalSelectedVal: '',
          kpiSelectedVal: '',
        });
      };
    
      const saveCampaignGroup = async () => {
        campaignGroupData.push({
          id: Math.floor(Math.random() * 100),
          campaignGroupName: inputState.nameSelectedVal,
          campaignNumber: selectedCampaigns,
          desc: inputState.desSelectedVal,
          createdAt: await new Date().toLocaleDateString('en-gb', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
          }),
          createdBy: JSON.parse(localStorage.getItem('okta-token-storage')).idToken
            .claims.name,
          goal: inputState.goalSelectedVal,
          kpi: inputState.kpiSelectedVal,
          dailySpend: selectedCampaigns.length === 0 ? '-' : 450,
          dailySpendofTotal: selectedCampaigns.length === 0 ? '-' : 12,
        });
        localStorage.setItem(
          'campaignGroupData',
          JSON.stringify(campaignGroupData),
        );
        await setIsOpen(false);
        updateGroupListData(campaignGroupData);
    
        toast({
          duration: 2000,
          position: 'top-right',
          status: 'success',
          title: 'Campaign group has been created successfully',
        });
        setInputState({
          nameSelectedVal: '',
          desSelectedVal: '',
          goalSelectedVal: '',
          kpiSelectedVal: '',
        });
      };
      const handleChange = (status) => {
        setBtnDisabled(status);
      };
     
      return (
        <>
          <Wizard
            title="H& M France | Campaign group"
            isOpen={isOpen}
            actions={{
              secondary: {
                label: 'Cancel',
                onClick: () => {
                  setDialogOpen(true);
                },
              },
            }}
            activeStepIndex={(index) => getActiveIndex(index)}>
            <Wizard.Step
              title="Campaign group details"
              isValid={true}
              actions={{
                primary: {
                  label: 'Campaigns',
                  isDisabled: btnDisabled,
                },
              }}>
              <CampaignGroupDetails
                onChange={handleChange}
                setInputState={setInputState}
                inputState={inputState}
                campaignGroupNameList={campaignGroupList}
                selectedGroup={selectedGroup}
                id={id}
              />
            </Wizard.Step>
            <Wizard.Step
              title="Campaigns"
              isValid={true}
              actions={{
                primary: {
                  onClick: () => {
                    setForceCall(!forceCall);
                  },
                },
              }}>
              <SelectCampaigns
                onChange={setSelectedCampaigns}
                campaignList={campaignList}
                totalCampaigns={totalCampaigns}
                id={id}
                activeIndex={widgetStep}
                selectedGroup={selectedGroup}
                forceCall={forceCall}
              />
            </Wizard.Step>
            {(() => {
              if (id === undefined || id === '') {
                return (
                  <Wizard.Step
                    title="Review and save"
                    isValid={true}
                    actions={{
                      primary: {
                        label: 'Complete and save',
                        onClick: () => {
                          saveCampaignGroup();
                        },
                      },
                    }}>
                    <PreviewDetails
                      details={inputState}
                      campaigns={selectedCampaigns}
                      NoCampaignExist={NoCampaignExist}
                    />
                  </Wizard.Step>
                );
              } else {
                return (
                  <Wizard.Step
                    title="Review and save"
                    isValid={true}
                    actions={{
                      primary: {
                        label: 'Complete and save',
                        onClick: () => {
                          updateCampaignGroup(id);
                        },
                      },
                    }}>
                    <PreviewDetails
                      details={inputState}
                      campaigns={selectedCampaigns}
                      NoCampaignExist={NoCampaignExist}
                    />
                  </Wizard.Step>
                );
              }
            })()}
          </Wizard>
    
          <Dialog
            title={dialogText}
            isOpen={dialogOpen}
            onClose={() => setDialogOpen(false)}>
            <Dialog.Footer>
              <Button variant="secondary" onClick={() => setDialogOpen(false)}>
                No
              </Button>
              <Button
                onClick={() => {
                  setIsOpen(false);
                  setDialogOpen(false);
                  removeCampaignGroup();
                }}>
                Yes
              </Button>
            </Dialog.Footer>
          </Dialog>
        </>
      );
    });
    export default CampaignGrouping;

来源：https://stackoverflow.com/questions/65844760/test-coverage-very-low-due-to-these-code-campaigngrouplisting-findindexitem