How to use the react-testing-library.fireEvent.click function in react-testing-library

test(`User should be able to add a new checkbox item.`, async () => {
    const { getByText, getByTestId, getAllByTestId } = render()
    const modalToggle = getByTestId('modal-toggle')
    // Open menu.
    const menuToggle = getByText(/More/i)
    fireEvent.click(menuToggle)

    // Get input field.
    const input = getByTestId('add-more-input')
    const submitButton = getByTestId('add-more-submit-button')

    // Assert that input and submit button are present.
    expect(input).toBeInTheDocument()
    expect(submitButton).toHaveAttribute('disabled')

    // Input new checkbox item.
    fireEvent.change(input, {
      target: {
        value: 'New Checkbox Item!',
      },
    })

expect(() => getByText('Back')).toThrow();

  // Go to next section (last)
  fireEvent.click(getByText('Next'));

  // Validate controls
  getByText('Prev');
  expect(() => getByText('Back')).toThrow();
  expect(() => getByText('Next')).toThrow();

  // Validate TOC not open
  expect(() => getByText('Title')).toThrow();

  // Open TOC and change section (middle)
  fireEvent.click(getByText('TOC'));
  fireEvent.click(getByText('Pride and Prejudice'));
  await waitForDomChange();

  // Validate controls
  getByText('Prev');
  getByText('Back');
  getByText('Next');

  // Validate TOC not open
  expect(() => getByText('Title')).toThrow();

  // Go to previous section (first)
  fireEvent.click(getByText('Prev'));

  // Validate controls
  expect(() => getByText('Prev')).toThrow();

// Assert that input and submit button are present.
    expect(input).toBeInTheDocument()
    expect(submitButton).toHaveAttribute('disabled')

    // Input new checkbox item.
    fireEvent.change(input, {
      target: {
        value: 'New Checkbox Item!',
      },
    })

    // Assert that user can now submit
    expect(submitButton).not.toHaveAttribute('disabled')

    fireEvent.click(submitButton)

    // Assert that modal closes after user submits.
    expect(modalToggle).toHaveAttribute('tabindex', '-1')
    expect(input).not.toBeInTheDocument()
    expect(submitButton).not.toBeInTheDocument()

    // TODO: figure out how to test context.questionnaireDispatch so it's not just a mock jest.fn()
  })
})

test('navigates from one matched location to another, first uses component prop, second uses render prop', () => {
    const { container, getByText } = renderWithRouter();
    expect(container.innerHTML).toMatch('Home');
    const leftClick = { button: 0 };
    fireEvent.click(getByText(/about/i), leftClick);
    expect(container.innerHTML).toMatch('About');
})

test('toggle click calls onClick argument with isOpen', () => {
  const onClick = jest.fn();
  const {getByTestId} = render(
    
  );
  const toggle = getByTestId('toggle');

  fireEvent.click(toggle);
  expect(onClick).toHaveBeenCalled();
});

it('should display an unread log notification when viewing the reference tab)', async () => {
    const { container } = renderIntoDocument()
    const referenceTab = container.querySelector('.reference')
    fireEvent.click(referenceTab)
    await waitForElement(() => container.querySelector('.command-reference'))
    Logger.log('blah')
    const unreadLogNotification = container.querySelector('.log.unread')
    expect(unreadLogNotification).toBeInTheDocument()
  })
})

it('should update component when hooks fired', () => {
    const { getByText } = render()

    expect(Counter).toHaveBeenCalledTimes(1)
    fireEvent.click(getByText('Increase'))
    expect(Counter).toHaveBeenCalledTimes(2)

    expect(Counter).toHaveBeenLastCalledWith(withValues({ counter: 1 }), context)
  })

it('sets enabled state with stored viewport', async () => {
  registerTestPlugins();
  mockStorage({ [storageKey]: { width: 420, height: 420 } });
  mockRendererCore();

  const { getByText } = loadTestPlugins();
  fireEvent.click(getByText(/responsive/i));

  await wait(() =>
    expect(getResponsivePreviewState()).toEqual({
      enabled: true,
      viewport: { width: 420, height: 420 }
    })
  );
});

test('should set events on handler', () => {
    const FakeOnClick = jest.fn((e) => e);
    const IonButton = createReactComponent('ion-button');

    const { getByText } = render(
      
        ButtonNameA
      
    );
    fireEvent.click(getByText('ButtonNameA'));
    expect(FakeOnClick).toBeCalledTimes(1);
  });

value="2"
            size="large"
            index={1}
          />
          
        
      
    );

    fireEvent.click(getByTestId("test-checkbox3"));

    expect(getByTestId("test-checkbox").hasAttribute("checked"));
    expect(getByTestId("test-checkbox2").hasAttribute("checked"));
    expect(getByTestId("test-checkbox3").hasAttribute("checked"));
  });
});