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

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, "[email protected]");
    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>
    </>
  );
}

CodePudding user response：

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)}>
    ...
  );
}

CodePudding user response：

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);