How to mock control object from useForm

[Peeyush2]

I have created custom component for form, and I am passing control from parent component. I am trying to write unit test case for this component using jest. How do I mock this control object?

import React from "react";
import { TextField } from "@material-ui/core";
import { useController } from "react-hook-form";

function Input({ control /*what to pass here for mocking*/ , name }) {
  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: "",
  });

  return (
    <TextField 
      onChange={onChange} // send value to hook form 
      onBlur={onBlur} // notify when input is touched/blur
      value={value} // input value
      name={name} // send down the input name
      inputRef={ref} // send input ref, so we can focus on input when error appear
    />
  );
}

[Moshyfawn]

What do you mean by "mock"? What's your use-case?

[Peeyush2]

I am writing test cases in jest. What value should I pass as prop for control?

[Moshyfawn]

Take a look at the internal lib test folder of RHF

[Andrii-Vovk]

I have created custom component for form, and I am passing control from parent component. I am trying to write unit test case for this component using jest. How do I mock this control object?

import React from "react";
import { TextField } from "@material-ui/core";
import { useController } from "react-hook-form";

function Input({ control /*what to pass here for mocking*/ , name }) {
  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: "",
  });

  return (
    <TextField 
      onChange={onChange} // send value to hook form 
      onBlur={onBlur} // notify when input is touched/blur
      value={value} // input value
      name={name} // send down the input name
      inputRef={ref} // send input ref, so we can focus on input when error appear
    />
  );
}

Any luck here?

[144mdgross]

I ended up getting around this by wrapping the component I want to test in another component that can call useForm and pass control down.

const SomeComponentWrapper = ({ initialValues, ...props }) => {
  const { control } = useForm({
    defaultValues: initialValues,
  });

  return (
    <SomeComponent
      control={control}
      {...props}
    />
  );
};

and now in your jest / rtl tests you can render your component like this:

render(<SomeComponent initialValues={yourInitialValues}  customProp={customProp} />)

[Temitope3665]

I found a hack that works for my case

import { useForm } from "react-hook-form";

jest.mock("react-hook-form");

describe("Page...", () => {
  const mockUseForm = useForm as jest.Mock;
  beforeEach(() => {`
    mockUseForm.mockImplementation(() => ({
      handleSubmit: jest.fn(),
      formState: { errors: {}, isDirty: true, isSubmitting: false, isValid: true },
      register: jest.fn(),
      watch: jest.fn(),
      ...rest
    }));
  });
})

[OscarJVD]

How do you use it in the render?

[romariogomes]

I had a problem similar to yours (receive control by props). Then I applied a workaround such like this:

• Before to render component, I rendered a hook:

const { result } = renderHook(() => useForm<FormType>(), { wrapper: myCustomWrapper })

• Then I render my component passing the control from hook render result

render(<MyComponent control={result.current.control} />)

• In my case the content of control does not matter because I was testing only simple rendering rules.

[OscarJVD]

any solution?

[arnarleifs]

Do you need to mock it? Is the code below not a suitable solution?

import { useForm } from "react-hook-form";
import { render } from "@testing-library/react";

describe("Input", () => {
  it("should render truthy", () => {
    const form = useForm();
    const { baseElement } = render(
      <Input control={form.control} name="fullName" />
    );
    expect(baseElement).toBeTruthy();
  });
});

After testing it out I managed to get this code working:

const InputInjected = () => {
  const form = useForm();
  return <Input control={form.control} name="test" />;
};

describe('Input', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<InputInjected />);
    expect(baseElement).toBeTruthy();
  });
});

[asos-alexhaigh]

The tests used internally have some good examples of how this can be done

https://github.com/react-hook-form/react-hook-form/blob/master/src/__tests__/useController.test.tsx

This is around L34

type FormValues = {
      test: string;
      test1: string;
    };

    const Test = ({ control }: { control: Control<FormValues> }) => {
      const { field } = useController({
        name: "test",
        control,
      });

      renderCounter[0]++;

      return <input {...field} />;
    };