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

test('should fire onChange correctly', () => {
    const onChangeSpy = jest.fn();
    const { getByLabelText, rerender } = render(
      
    );
    fireEvent.change(getByLabelText('First Name'), {
      target: { value: 'Joe' },
    });
    const newValue = onChangeSpy.mock.calls[0][0];
    expect(newValue).toEqual({
      firstName: 'Joe',
      lastName: '',
    });
    rerender();
    fireEvent.change(getByLabelText('Last Name'), {
      target: { value: 'Foo' },
    });
    expect(onChangeSpy.mock.calls[1][0]).toEqual({
      firstName: 'Joe',
      lastName: 'Foo',
    });
  });
});

it('should expose fire event helpers', () => {
    fireEvent.copy(htmlEl);
    fireEvent.cut(htmlEl);
    fireEvent.paste(htmlEl);
    fireEvent.compositionEnd(htmlEl);
    fireEvent.compositionStart(htmlEl);
    fireEvent.compositionUpdate(htmlEl);
    fireEvent.keyDown(htmlEl);
    fireEvent.keyPress(htmlEl);
    fireEvent.keyUp(htmlEl);
    fireEvent.focus(htmlEl);
    fireEvent.blur(htmlEl);
    fireEvent.change(htmlEl);
    fireEvent.input(htmlEl);
    fireEvent.invalid(htmlEl);
    fireEvent.submit(htmlEl);
    fireEvent.click(htmlEl);
    fireEvent.contextMenu(htmlEl);
    fireEvent.dblClick(htmlEl);
    fireEvent.doubleClick(htmlEl);
    fireEvent.drag(htmlEl);
    fireEvent.dragEnd(htmlEl);
    fireEvent.dragEnter(htmlEl);
    fireEvent.dragExit(htmlEl);
    fireEvent.dragLeave(htmlEl);
    fireEvent.dragOver(htmlEl);
    fireEvent.dragStart(htmlEl);
    fireEvent.drop(htmlEl);
    fireEvent.mouseDown(htmlEl);

test('Should render a single textarea and a disabled next button.', async () => {
    const { getByTestId } = render()
    const nextButton = getByTestId('next-button')

    const textarea = getByTestId('textarea')
    expect(textarea).toBeInTheDocument()
    expect(nextButton).toHaveAttribute('disabled')

    fireEvent.change(textarea, {
      target: {
        value: 'This is a test! 🤓',
      },
    })
    await wait(() => {
      expect(nextButton).not.toHaveAttribute('disabled')
    })
  })
})

const validateEmails = async () => {
        for (let email of invalidEmails) {
          fireEvent.change(input, {
            target: {
              value: email,
            },
          })

          await wait(() => {
            expect(submitButton).toHaveAttribute('disabled')
          })
        }
      }

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

      expect(Component).toHaveBeenCalledTimes(1)
      expect(Component).toHaveBeenLastCalledWith(withValues({ counter: 0, texter: '' }), context)

      fireEvent.change(getByPlaceholderText('Type here'), { target: { value: 'content' } })
      expect(Component).toHaveBeenCalledTimes(2)
      expect(Component).toHaveBeenLastCalledWith(
        withValues({ counter: 0, texter: 'content' }),
        context
      )

      fireEvent.click(getByText('Increase'))
      expect(Component).toHaveBeenCalledTimes(3)
      expect(Component).toHaveBeenLastCalledWith(
        withValues({ counter: 1, texter: 'content' }),
        context
      )
    })

await wait(async () => {
      const nextButton = getByTestId('next-button')

      const textarea = getByTestId('textarea')
      expect(textarea).toBeInTheDocument()
      expect(nextButton).toHaveAttribute('disabled')

      fireEvent.change(textarea, {
        target: {
          value: 'This is a test! 🤓',
        },
      })
      await wait(() => {
        expect(nextButton).not.toHaveAttribute('disabled')
      })
    })
  })

await wait(async () => {
      const nextButton = getByTestId('next-button')

      const textarea = getByTestId('textarea')
      expect(textarea).toBeInTheDocument()
      expect(nextButton).toHaveAttribute('disabled')

      fireEvent.change(textarea, {
        target: {
          value: 'This is a test! 🤓',
        },
      })
      await wait(() => {
        expect(nextButton).not.toHaveAttribute('disabled')
      })
    })
  })

test(`Next Button should NOT be disabled after user types their name.`, async () => {
    const { getByTestId, getByPlaceholderText } = render()
    const input = getByPlaceholderText(`My name`)
    const nextButton = getByTestId(`next-button`)

    expect(nextButton).toBeInTheDocument()
    expect(nextButton).toHaveAttribute('disabled')

    fireEvent.change(input, {
      target: { value: `Tim` },
    })

    await wait(() => {
      expect(nextButton).not.toHaveAttribute('disabled')
    })
  })
})

);
    const { getByTestId, rerender } = render(renderForm());

    const firstNameInput = getByTestId('firstNameWrapper').querySelector(
      'input'
    );
    const lastNameInput = getByTestId('lastNameWrapper').querySelector('input');

    const firstNameId = firstNameInput.getAttribute('id');
    const lastNameId = lastNameInput.getAttribute('id');

    expect(firstNameId).toBeTruthy();
    expect(lastNameId).toBeTruthy();
    expect(firstNameId).not.toEqual(lastNameId);

    fireEvent.change(firstNameInput, {
      target: { value: 'Joe' },
    });
    expect(onChangeSpy.mock.calls[0][0]).toEqual({
      firstName: 'Joe',
      lastName: '',
    });
    fireEvent.change(lastNameInput, {
      target: { value: 'Foo' },
    });
    expect(onChangeSpy.mock.calls[1][0]).toEqual({
      firstName: 'Joe',
      lastName: 'Foo',
    });

    rerender(renderForm());

it("should display message when filter input does not find a match", () => {
    const { openSelect, getByTestId, getByText } = renderComponent({
      hasFilter: true,
      hasNotResultsMessage: "No match",
    });

    openSelect();
    fireEvent.change(getByTestId("list-filter-input"), { target: { value: "g" } });
    expect(getByTestId("no-result-filter")).toBeInTheDocument();
    expect(getByText("No match")).toBeInTheDocument();
  });