How to test if function is called after clicking attachFiles button in Body component using React Testing Library in composite components?

Question

I am new to react and currently I am trying to write unit test cases for my component but facing several issues,

Failed: "Test failed because it logged error to the console: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s [undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

All my imports are proper.

In my component I am trying to return a renderer component which is having 3 integrated components, and feature is working I am only unable to test.

Code reference: My container implementation:

import * as React from "react";

export interface IMyTaskProps
  extends Pick<
    IHeaderFooterProps,
    "appDef" | "onClose"
  > {
  convId: string;
  saveTabError?: string;
  createSomething: (
    
    isReq?: boolean,
    values?: IMyFileValues
  ) => void;
}

export const MyTaskContainer: React.FunctionComponent<
  IMyTaskProps
> = props => {
  const { appDef, onClose, createSomething } = props;;

  const attachFiles = (_files: FileInput[]): void => {
    onSaveClickCreate(abc, _files); //abc is some values we can ignore for now
  };

  const closeFunction = (): void => {
    onClose(false);
  };

  const onSaveClickCreate = React.useCallback(
    (abc, ...args) => {
      const [{id, fileName }] = args[0];
     
      const objectId = id.toString();
  

      createSomething(
        {
          // sending somevalues from args,
        },
        true,
        abc
        {
        
          objectId,
         
        }
      );
    },
    [createSomething]
  );

  const [showAboutDialog, setShowAboutDialog] = React.useState(false);
  const onAboutDialogOpenCallback = () => {
    setShowAboutDialog(true);
  };
  const onAboutDialogCloseCallback = () => {
    setShowAboutDialog(false);
  };
  const onCloseClicked = () => {
    onClose(false);
  };

  const component1 = (
    <Header
      name={"name"}
      onClose={onCloseClicked}
      onAboutDialogOpen={onAboutDialogOpenCallback}
    />
  );

  const component2 = (
    <Body
      attachFiles={attachFiles}
      closeFilesSuperPicker={closeFunction}
    />
  );

  const about = showAboutDialog && (
    <AboutRenderer
      onClose={onAboutDialogCloseCallback}
    />
  );

  return (
    <MyRenderer 
      header={component1}
      body={component2}
      about={about}
    />
  );
};

My renderer file:

import * as React from "react";


export interface IMyRendererProps {
  header: JSX.Element;
  body: JSX.Element;
  about: ReactNode;
}

export const MyRenderer = (
  props: IMyRendererProps
) => {

  const { header, body, about } = props;

  return (
    <>
      {header}
      {body}
      {about}
    </>
  );
};

and below is the test,

import * as React from "react";.
import { render, screen } from "@testing-library/react";

jest.mock("./path", () => {
  const originalModule = jest.requireActual(
    "./path"
  );
  return {
    ...originalModule,
    MyRenderer: jest.fn(
      ({ children, ...props }) => <div {...props}>{children}</div>
    ),
  };
});


const defaultProps: IMyTaskProps = {
  actionType: ActionTypes.Create,
  appDef: { name: "mockName", ImageUrl: "example" } as IDef,
  Id: "Id",
  onClose: jest.fn(),
  createSomething: jest.fn(),
};

describe("Testing MyTaskContainer", () => {

  afterEach(() => {
    jest.clearAllMocks();
  });

  test("should render the component", () => {
    console.log("Test case reached here");
    //  expect.assertions(1);

    render(<MyTaskContainer {...defaultProps} />);

    console.log(screen.debug());

  });

Not sure why, I have mocked my renderer and giving values using default props. Can someone help me to understand how can I write the test cases in integrated components and how can I test if 'createSomething' is called when 'attachFiles' button is clicked?

I wanted to test rendering and test if createSomething is called after we click on attachFiles

How to test if function is called after clicking attachFiles button in Body component using React Testing Library in composite components?

0 Answers0