Property 'onSubmit' does not exist on type 'IntrinsicAttributes'.ts(2322)

Question

I have a parent component contact form, using react-hook-form. I want to make a test for this component using react testing library. I have got this error:

Type '{ onSubmit: Mock<any, any>; }' is not assignable to type 'IntrinsicAttributes'. Property 'onSubmit' does not exist on type 'IntrinsicAttributes'.

describe("Form", () => {
  const onSubmit = jest.fn();

  const renderForm = () => {
    const Wrapper = (props: { children: React.ReactNode }) => {
      const formMethods = useForm();
      return <FormProvider {...formMethods}>{props.children}</FormProvider>;
    };
    customRender(
      <Wrapper>
        <ContactForm onSubmit={onSubmit} /> //error is here
      </Wrapper>,
      {
        withRouter: true,
      }
    );
  };

  it("successful submit", () => {
    renderForm();
    const emailInput = screen.getByRole("textbox", { name: /email/i })
    const fNameInput = screen.getByRole("textbox", { name: /fname/i });
    const submitButton = screen.getByRole("button", { name: /submit/i });

    expect(emailInput).toBeInTheDocument();
    expect(fNameInput).toBeInTheDocument();


    fireEvent.input(emailInput, "abc@abc.com");
    fireEvent.input(fNameInput, "Alex");
    fireEvent.click(submitButton);

    expect(onSubmit).toHaveBeenCalledTimes(1);
  });
});

Component

export function ContactForm() {

  const methods = useForm<FormSchemaType>({
    resolver: zodResolver(FormSchema),
  });
  const { handleSubmit, reset } = methods;
  const onSubmit: SubmitHandler<FormSchemaType> = data => {
    ...
  };

  return (
    <>
      <FormProvider {...methods}>
          <FormWrapper>
            <form onSubmit={handleSubmit(onSubmit)}>
              ....
            </form>
          </FormWrapper>
      </FormProvider>
    </>
  );
}

Answer 1

In your code:

<ContactForm onSubmit={onSubmit} />

You're passing your onSubmit function as a prop to the component ContactForm . Except your component doesn't use any prop, and onSubmit is not an "intrinsic attribute", a standard, predefined prop like children could be.

A way to use your mocked function (/,\ not sure it's the best practice: but should be working):

interface ContactFormProps {
  onSubmit?: SubmitHandler<FormSchemaType>;
}

export function ContactForm({ onSubmit }: ContactFormProps) {
  // ...

  const myOnSubmit: SubmitHandler<FormSchemaType> = onSubmit ?? data => {
    ...
  }; // will use onSubmit from the props if it's defined, or your local function otherwise

  return (
    ...
    <form onSubmit={handleSubmit(myOnSubmit)}>
    ...
  );
}

Answer 2

Can't pass the onSubmit to the component since it's not accepting any props.

Try to get the form by id and see if submitting works through the fireevent

<form  data-testid="form" onSubmit={handleSubmit(onSubmit)}>

const logSpy = jest.spyOn(console, "onSubmit working"); 
fireEvent.submit(getByTestId("form"));
expect(logSpy).toHaveBeenCalledTimes(1);