testWithRenderReactHookForm.test.js

import React from "react";
import { screen } from "@testing-library/react";
import { renderWithReactHookForm } from "./services/testing-helpers";
import UIFormRelatedURL from "./RelatedURL";

const props = {
  name: "relatedUrl",
  label: "Related URL",
};

describe("standard component behavior", () => {
  beforeEach(() => {
    renderWithReactHookForm(<UIFormRelatedURL {...props} />, {
      // Add some default values to our form state, using Reach Hook Form's "defaultValues" param
      defaultValues: {
        relatedUrl: [
          {
            url: "http://www.northwestern.edu",
            label: {
              id: "HATHI_TRUST_DIGITAL_LIBRARY",
              label: "Hathi Trust Digital Library",
              scheme: "RELATED_URL",
            },
          },
        ],
      },
    });
  });

  it("renders component and an add button", () => {
    expect(screen.getByTestId("related-url-wrapper"));
    expect(screen.getByTestId("button-add-field-array-row"));
  });

  it("renders existing related url values", () => {
    expect(screen.getAllByTestId("related-url-existing-value")).toHaveLength(
      1
    );
    expect(
      screen.getByText(
        "http://www.northwestern.edu, Hathi Trust Digital Library"
      )
    );
  });

  it("renders form elements when adding a new related url value", () => {
    const addButton = screen.getByTestId("button-add-field-array-row");
    fireEvent.click(addButton);
    fireEvent.click(addButton);
    expect(screen.getAllByTestId("related-url-form-item")).toHaveLength(2);
    ...
  });
});