I'm new to react testing, i'm trying to verify react functional component to be there, with this code, but for some reason it is complaining about something else TypeError: getItems [ props.action ] is not a function

any help/suggestion with this, to verify component to be there ?

interface SelectionListProps {
  actionArgs?: string | undefined;
  action: string;
  name?: string;
  identifier?: string;
  classes: {
    button_basic: string;
    formControl: string;
    selectionCard: string;
  };
}

export const SelectionList: React.FC<SelectionListProps> = (
  props
) => {
 
  const dispatch = useDispatch();

  const getItems = {
    analysers: (site: any) => dispatch(getAnalysers(site)),
    sites: (site: any) => dispatch(getSites()),
  } as any;

  const initializeCollapses = () => {
  
  };

  useEffect(() => {
    getItems[props.action](props.actionArgs).then(() => {
      initializeCollapses();
    });
  }, []);


  return (
    <List component="div" data-testid="SelectionListt">
    </List>
  );
};

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

my testing code:

import React from "react";
import { expect } from "@jest/globals";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import { SelectionList } from "../SelectionList";
import { Provider } from "react-redux";
import { store } from "../../redux/store";

import "@testing-library/jest-dom/extend-expect";

function handleUpdateClick(event: any, type = "") {}
test("test", () => {
  render(
    <Provider store={store}>
      <SelectionList
        classes={{ button_basic: "", formControl: "", selectionCard: "" }}
        action={""}
        actionArgs={""}
     
      />
    </Provider>
  );
  const SelectionCardElement = screen.getByTestId("SelectionListt");
  expect(SelectionCardElement).toBeInTheDocument();
});

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You are passing an empty string for the action name, but getItems[""] does not match to any function since the value of getItems is:

const getItems = {
    analysers: (site: any) => dispatch(getAnalysers(site)),
    platforms: (site: any) => dispatch(getPlatforms(site)),
    brokers: (site: any) => dispatch(getBrokers(site)),
    cameras: (site: any) => dispatch(getCameras(site)),
    sites: (site: any) => dispatch(getSites()),
}

Also all functions of getItems, but the last one, expect a site argument. However currently you are passing an empty string as well for the arguments. In the sites function you can remove the unused sites argument