Mock / set dirtyFields for testing

[IanVS]

I have a small component that uses FormContext to pull some form state off the context and show different things depending on whether the field is dirty (in addition to some other things).

In my test I'm creating a wrapper that calls useForm and wraps the component with a FormProvider, but so far I can't find a great way to set the dirty state. Does anyone have any ideas?

[sujinleeme]

I think the best way to get a form dirty is to use the userEvent function in the testing-library. Furthermore, it clarifies the understanding of both form and user interaction.

Here's the example.
In this test, I would like to verify whether the submit button is enabled or disabled when the form is modified.

describe("Submit button", () => {
  it("The submit button is disabled, when the form is not dirty", () => {
    render(<App />);
    expect(screen.getByText("Submit")).toBeDisabled();
  });

  it("he submit button is enabled, when the form is dirty", async () => {
    render(<App />);
    await userEvent.type(screen.getByPlaceholderText("First Name"), "Sujin");
    expect(screen.getByText("Submit")).toBeEnabled();
  });
});

[IanVS]

Thanks, that's indeed what I would normally do, except in this case there's no actual form elements to interact with. The test is just for a component that uses form context and a name prop, and then behaves differently depending on whether the named field is dirty or not. I could add an input just for testing purposes, but this is also a Storybook test, and I don't really want an input showing up there.

[sujinleeme]

Then, you may need to reset form or resetField whenever form values are updated and keep the form dirty inside the wrapper component.
Here's the example

const defaultValues = {
  firstName: "",
};

const FormWrapper = ({
  formValues,
  component,
}: {
  formValues: typeof defaultValues | undefined;
  component: ReactNode;
}) => {
  const form = useForm({
    defaultValues,
  });

  const { reset } = form;

  useEffect(() => {
    reset(formValues, { keepDefaultValues: true });
  }, [reset, formValues]);

  return (
    <FormProvider {...form}>
      <form>{component}</form>
    </FormProvider>
  );
};

describe("Submit button", () => {
  it("The submit button is disabled, when the form is not dirty", () => {
    render(
      <FormWrapper formValues={undefined} component={<SubmitButton />} />,
    );
    expect(screen.getByText("Submit")).toBeDisabled();
  });

  it("The submit button is enabled, when the form is dirty", () => {
    render(
      <FormWrapper
        formValues={{
          firstName: "Sujin",
        }}
        component={<SubmitButton />}
      />,
    );
    expect(screen.getByText("Submit")).toBeEnabled();
  });
});