writing test for component that uses useFieldArray

[ergunp]

Hi,

I have a component that is using useFieldArray and I am trying to write tests for this component. Is there a way to mock useFieldArray?

here is the component

export default function Fields({
  control,
  register,
  defaultValues,
  errors,
  classes,
  patchingImpact,
  deviceRole,
  deviceVendor,
  chassisModel,
  transceiver,
  media,
  connector,
}) {
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'patchingDetails',
    defaultValues,
  });
return (
    <React.Fragment>
 </React.Fragment>
  );

and here is my test case

import PatchingForm from './patching-form';

afterEach(cleanup);

const mockControl = {
  defaultValuesRef: {
    current: {},
  },
  setValue: jest.fn(),
  register: jest.fn(),
  unregister: jest.fn(),
  triggerValidation: jest.fn(),
  errors: {},
  mode: { isOnSubmit: false, isOnBlur: false },
  reValidateMode: {
    isReValidateOnBlur: false,
    isReValidateOnSubmit: false,
  },
  formState: {
    dirty: false,
    isSubmitted: false,
    submitCount: 0,
    touched: {},
    isSubmitting: false,
    isValid: false,
  },
  fieldsRef: {
    current: {},
  },
  resetFieldArrayFunctionRef: {
    current: {},
  },
  fieldArrayNamesRef: {
    current: '',
  },
  isDirtyRef: {
    current: false,
  },
  readFormStateRef: {
    current: {
      dirty: true,
      isSubmitted: false,
      submitCount: false,
      touched: false,
      isSubmitting: false,
      isValid: false,
    },
  },
};
const mockRegister = jest.fn();
const mockDefaultValues = {
  select: '',
  input: '',
  popType: '',
  projectName: '',
  domain: '',
  ipDomain: '',
  network: '',
  power: '',
  deviceRole: '',
  deviceVendor: '',
  chassisModel: '',
  patchingImpact: '',
  transceiver: '',
  media: '',
  connector: '',
  patchingDetails: [
    {
      tgRef: '',
      tGName: '',
      impact: '',
      targetDate: '',
      interConnection: [
        {
          aEnd: {
            hostName: '',
            deviceRole: '',
            deviceVendor: '',
            chassisModel: '',
            locationCode: '',
            locationName: '',
            locationAddress: '',
            port: '',
            transceiver: '',
            media: '',
            connector: '',
          },
          bEnd: {
            hostName: '',
            deviceRole: '',
            deviceVendor: '',
            chassisModel: '',
            locationCode: '',
            locationName: '',
            locationAddress: '',
            port: '',
            transceiver: '',
            media: '',
            connector: '',
          },
        },
      ],
    },
  ],
};
const mockErrors = jest.fn();
const mockClasses = jest.fn();



describe('render golden-build-create-order component', () => {
  it('mount golden-build-create-order component', () => {
    const wrapper = mount(
      <PatchingForm
        control={mockControl}
        register={mockRegister}
        defaultValues={mockDefaultValues}
        errors={mockErrors}
        classes={mockClasses}
        patchingImpact
        deviceRole
        deviceVendor
        chassisModel
        transceiver
        media
        connector
      />
    );
    expect(wrapper.contains('Golden Build Create Order')).toEqual(true);
  });
});

I get the following error

   TypeError: Cannot read property 'current' of undefined

      37 |   connector,
      38 | }) {
    > 39 |   const { fields, append, remove } = useFieldArray({
         |                                      ^
      40 |     control,
      41 |     name: 'patchingDetails',
      42 |     defaultValues,

Any help would be much appreciated.

[bluebill1049]

better not to mock the useFieldArray and doing the integration tests.

[ergunp]

Thanks I have taken a look and based on the example I would do the following

 const { result } = renderHook(() => {
      const { register, control } = useForm();
      const { fields, append, remove } = useFieldArray({
        control,
        name: 'patchingDetails',
        mockDefaultValues,
      });

      <PatchingForm
        control={control}
        register={register}
        defaultValues={mockDefaultValues}
        errors={mockErrors}
        classes={mockClasses}
        patchingImpact
        deviceRole
        deviceVendor
        chassisModel
        transceiver
        media
        connector
      />;
    });

is this current? As I dont think useFieldArray is being used

[ergunp]

Managed to figure it out using

import { screen } from '@testing-library/dom';
import { render, waitFor } from '@testing-library/react';

  it('mount golden-build-create-order component', async () => {
    const Component = () => {
      const classes = useStyles();
      const { register, errors, control } = useForm({
        mode: 'onChange',
        reValidateMode: 'onChange',
        defaultValues,
      });
      return (
        <PatchingForm
          {...{
            control,
            register,
            defaultValues,
            errors,
            classes,
            patchingImpact,
            deviceRole,
            deviceVendor,
            chassisModel,
            transceiver,
            media,
            connector,
          }}
        />
      );
    };
    render(<Component />);
    await waitFor(() => expect(screen.getAllByRole('button')).toHaveLength(18));
  });

[julio3266]

dê uma olhada aqui: https://github.com/react-hook-form/react-hook-form/blob/master/src/useFieldArray.test.tsx

@bluebill1049 the url is broken, can you have the url correct?

[Moshyfawn]

dê uma olhada aqui: https://github.com/react-hook-form/react-hook-form/blob/master/src/useFieldArray.test.tsx

@bluebill1049 the url is broken, can you have the url correct?

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

[laura-scognamiglio]

thank you so much !