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

it('should throw on invalid arguments', () => {
    // $ExpectError
    fireEvent(1);
    // $ExpectError
    fireEvent(htmlEl, 1);
  });

it('should throw on invalid arguments', () => {
    // $ExpectError
    fireEvent(1);
    // $ExpectError
    fireEvent(htmlEl, 1);
  });

},
            errors: {
                username: 'username required',
                email: null,
                delayed: null,
            },
            fields: { username: '', email: 'test@test.com', delayed: '' },
            isValid: false,
            resetAll: expect.any(Function),
            setError: expect.any(Function),
            setField: expect.any(Function),
            submit: expect.any(Function),
            submitted: false,
        });

        fireEvent(container.querySelector('form'), new Event('reset'));

        expect(updateSpy).toHaveBeenCalledTimes(3); // reset
        expect(updateSpy).toHaveBeenCalledWith({
            dirty: {
                username: false,
                email: false,
                delayed: false,
            },
            errors: {
                username: 'username required',
                email: 'email required',
                delayed: null,
            },
            fields: { username: '', email: '', delayed: '' },
            isValid: false,
            resetAll: expect.any(Function),

it('should return the selected tab name when selected', () => {
    const handleTabChange = passedSelectedTab => {
      expect(passedSelectedTab).toBe('Reference')
    }
    const { container } = renderIntoDocument(
      
    )
    const referenceTab = container.querySelector('.reference')
    fireEvent(
      referenceTab,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      })
    )
  })
})

it('should be callable', () => {
    fireEvent(
      htmlEl,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      })
    );
  });

<div data-testid="button">
            change
          </div>
          <div data-testid="foobar">
            {foo}
            {bar}
          </div>
        
      );
    }

    const { getByTestId } = render();

    assert.equal(extractText(getByTestId('foobar')), 'foobar', 'starts with the correct value');

    fireEvent(
      getByTestId('button'),
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      })
    );

    assert.equal(extractText(getByTestId('foobar')), 'foobam', 'updates to the correct value');
  });
});

it("when edit is selected on the route the modal dialog is shown with that route", () => {
        const settings = { features: { groupedRoutes: true } };
        const { container, getByTestId, getByLabelText } = render();
        const routes = queryAllByLabelText(container, "Route");
        const editButton = getByLabelText("Edit Route", { element: routes[0] });

        fireEvent(
          editButton,
          new MouseEvent("click", {
            bubbles: true,
            cancelable: true
          })
        );

        expect(getByTestId("route-modal")).toBeVisible();
      });
    });