How to Test FormProvider / useFormContext ?

[guiaramos]

Hi there, I would like to know how to test with FormProvider?

I am doing the following:

EmailProvider.test.tsx

import * as React from 'react';
import { render } from '@testing-library/react';
import { FormProvider, useForm } from 'react-hook-form';
import EmailProvider from '.';

const customRender = (ui) => {
  const Wrapper: React.FC = ({ children }) => {
    const methods = useForm();
    return <FormProvider {...methods}>{children}</FormProvider>;
  };
  return render(<Wrapper>{ui}</Wrapper>);
};
describe('Email Provider component', () => {
  test('should render without error', async () => {
    // const { container } = await renderWithReactHookForm(<EmailProvider />);
    const { container } = customRender(<EmailProvider />);

    const tree = container.firstChild;

    // await waitFor(() => {
    expect(tree).toMatchSnapshot();
    // });
  });
});

and getting the following error:

console.error
    Warning: An update to Wrapper inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Wrapper (/Users/guilhermeramos/Desktop/projects.nosync/meket-client/src/features/SignIn/components/EmailProvider/EmailProvider.test.tsx:8:40)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/react-hook-form/src/useForm.ts:169:9
      at node_modules/react-hook-form/src/useForm.ts:752:11
      at MutationObserverImpl._callback (node_modules/react-hook-form/src/utils/onDomRemove.ts:21:9)

  console.error
    Warning: An update to Wrapper inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Wrapper (/Users/guilhermeramos/Desktop/projects.nosync/meket-client/src/features/SignIn/components/EmailProvider/EmailProvider.test.tsx:8:40)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/react-hook-form/src/useForm.ts:169:9
      at node_modules/react-hook-form/src/useForm.ts:731:11
      at node_modules/react-hook-form/src/useForm.ts:759:11

  console.error
    Warning: An update to Wrapper inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Wrapper (/Users/guilhermeramos/Desktop/projects.nosync/meket-client/src/features/SignIn/components/EmailProvider/EmailProvider.test.tsx:8:40)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/react-hook-form/src/useForm.ts:169:9
      at node_modules/react-hook-form/src/useForm.ts:752:11
      at MutationObserverImpl._callback (node_modules/react-hook-form/src/utils/onDomRemove.ts:21:9)

  console.error
    Warning: An update to Wrapper inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Wrapper (/Users/guilhermeramos/Desktop/projects.nosync/meket-client/src/features/SignIn/components/EmailProvider/EmailProvider.test.tsx:8:40)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/react-hook-form/src/useForm.ts:169:9
      at node_modules/react-hook-form/src/useForm.ts:731:11
      at node_modules/react-hook-form/src/useForm.ts:759:11

[bluebill1049]

you will need to include hook form Provider into your test.

[OleksandrFomin]

Could you please show an example?

[Moshyfawn]

Does this help?
https://github.com/react-hook-form/react-hook-form/blob/4bb68c4ad87289bf947066379ab03173ecaabc03/src/__tests__/useWatch.test.tsx

[bluebill1049]

refer the above for examples ^

[olaj]

I've did it like this. Not sure if it's the "best" way but it seems to work.

Here is the component

import React from "react";
import { useFormContext } from "react-hook-form";
import { FormControlDefault } from "../../../typings/types";
import FormLabel from "./FormLabel";

interface InputProps extends FormControlDefault {
  type?: string;
}

const Input = (props: InputProps) => {
  const { label, id, defaultValue, type, helperText, style } = props;

  const {
    register,
    formState: { errors },
  } = useFormContext();

  let classString = "form-control";

  if (errors[id]) {
    classString += " is-invalid";
  }

  return (
    <>
      <FormLabel id={id} label={label}></FormLabel>

      <input
        style={style}
        className={classString}
        id={id}
        name={id}
        type={type ? type : "text"}
        defaultValue={defaultValue}
        {...register(id)}
      />

      {helperText && (
        <div id={id} className="form-text">
          {helperText}
        </div>
      )}

      {errors && errors[id] && (
        <div className="invalid-feedback">{errors[id]?.message}</div>
      )}
    </>
  );
};
export default Input;

and the test

/**
 * @jest-environment jsdom
 */
import { render, screen } from "@testing-library/react";
import { FormProvider, useForm } from "react-hook-form";
import Input from "./Input";

describe("<Input />", () => {
  it("Input should render", () => {
    const TestInput = () => {
      const methods = useForm();
      return (
        <FormProvider {...methods}>
          <Input id="name" label="MyInput" defaultValue={"Test"}></Input>
        </FormProvider>
      );
    };

    render(<TestInput />);

    screen.getByRole("textbox", { name: "MyInput" });
  });
});

[Sbabureddy]

I'm facing different problem, I was able to mock form context, but I'm unable to to assert submit handler is called or not?. I mean the test for handlesubmit assertion is always failing.
Can you do the needful here @olaj @bluebill1049
https://codesandbox.io/s/restless-brook-hjyrmv