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

await wait(() => expect(mockReload).toHaveBeenCalledTimes(3));
  expect(mockPut).toHaveBeenCalledTimes(3);
  expect(mockPut.mock.calls[2][0]).toBe('/account/totp');
  expect(mockPut.mock.calls[2][1]).toMatchObject({ enabled: false });

  // Regen TOTP
  fireEvent.click(getByText('Regenerate'));
  await waitForDomChange();
  expect(mockPut).toHaveBeenCalledTimes(4);
  expect(mockPut.mock.calls[3][0]).toBe('/account/totp');
  expect(mockPut.mock.calls[3][1]).toMatchObject({ enabled: true });

  // Delete account
  expect(() => getByText('Are you sure', { exact: false })).toThrow();
  fireEvent.click(getByText('Delete'));
  fireEvent.change(getByLabelText('Confirmation'), {
    target: { value: 'YES' }
  });
  fireEvent.click(getByText('Delete'));
  expect(mockDelete).toHaveBeenCalledTimes(1);
  expect(mockDelete).toHaveBeenCalledWith('/account');
  await wait(() => expect(mockAssign).toHaveBeenCalledTimes(1));
  expect(mockAssign).toHaveBeenCalledWith('def');
});

,
    { container: document.getElementById('content')! },
  );

  // Create zip file
  const zip = new JSZip();
  zip.file('images/cover.jpg', 'shhh not actually a cover');
  zip.file('meta.json', JSON.stringify(testPub));

  // Add files
  fireEvent.change(getByLabelText('Upload EPUB'), {
    target: { files: [new File([], 'book.epub'), new File([], 'book2.epub')] },
  });
  await waitForElement(() => getByText('book.epub'));

  // Remove first file
  fireEvent.click(getAllByLabelText('Remove')[0]);
  expect(() => getByText('book.epub')).toThrow();

  // Mocks
  const mockSetItem = ((localForage as any).setItem = jest.fn());
  const mockGetItem = ((localForage as any).getItem = jest.fn());
  const mockConvert = ((convert as any).convert = jest.fn());

  // Mock convert
  mockConvert.mockResolvedValueOnce(await zip.generateAsync({ type: 'blob' }));

});

  // Validate bookmark
  getByText('bookmark at section', { exact: false });
  getByText('#1');
  getByText('#990');

  // Remove bookmark
  fireEvent.click(getByText('Remove'));

  // Validate bookmark gone
  expect(() => getByText('Remove')).toThrow();

  // Set cover
  expect(mockRevokeObjectURL).toHaveBeenCalledTimes(0);
  fireEvent.change(getByLabelText('Set Cover'), {
    target: { files: [new File([], 'cover.png')] },
  });

  // Validate old cover url was revoked and new generated
  expect(mockRevokeObjectURL).toHaveBeenCalledWith(blobUrl);
  expect(mockCreateObjectURL).toHaveBeenCalledTimes(2);

  // Mock loading pub-list from localForage
  mockGetItem.mockResolvedValueOnce([pub]);

  // Add new tag
  fireEvent.change(getByLabelText('Tag'), { target: { value: 'echo' } });
  fireEvent.click(getByLabelText('Add tag'));

  // Link existing tag
  fireEvent.change(getByLabelText('Tag'), { target: { value: 'bravo' } });

it('shows the transcript when the user selects a language', async () => {
    fetchMock.mock('https://example.com/vtt/fr.vtt', transcriptContent);

    const { getByLabelText, getByText } = render(
      wrapInIntlProvider(),
    );

    const select = screen.getByLabelText('Show a transcript');
    fireEvent.change(select, { target: { value: '1' } });
    // TODO: make sure the transcript is displayed
    await screen.findByText('Hide transcript');
  });
});

it('should update option list based on nested search term', async () => {
    const field = fromJS(nestedFieldConfig);
    const { getAllByText, input } = setup({ field });
    fireEvent.change(input, { target: { value: 'Nested' } });

    await wait(() => {
      expect(getAllByText('Nested post post-nested Nested field 1')).toHaveLength(1);
    });
  });

<button data-testid="btn" type="submit">
          Submit
        </button>
      
    
  )

  const { getByTestId } = render()

  fireEvent.click(getByTestId('btn'))
  await wait();
  expect(handleSubmit).toHaveBeenCalledTimes(0)
  expect(handleValidateFailed).toHaveBeenCalledTimes(1)
  expect(getByTestId('test-errors-2')).toHaveTextContent('This field is required')
  fireEvent.change(getByTestId('test-input-1'), { target: { value: '123' } })
  await wait();
  expect(getByTestId('test-input-2')).toHaveAttribute('value', '123')
  expect(getByTestId('test-errors-2')).not.toHaveTextContent(
    'This field is required'
  )
})

it('should display filtered options if search is not empty', () => {
      const { queryByTestId, queryAllByTestId } = renderOpenedSelect(
        <select>
      )

      fireEvent.change(queryByTestId('select-input') as Element, {
        target: { value: 'ann' },
      })
      const options = queryAllByTestId('option-container')
      expect(options).toHaveLength(2)
      expect(options[0].textContent).toEqual('Annecy')
      expect(options[1].textContent).toEqual('Villeurbanne')
    })
  })</select>

it('should pay invoice successfully', async () => {
      const { getByText, getByLabelText, store, network } = await renderComponent();
      fireEvent.change(getByLabelText('BOLT 11 Invoice'), { target: { value: 'lnbc1' } });
      fireEvent.click(getByText('Pay Invoice'));
      await wait(() => {
        expect(store.getState().modals.payInvoice.visible).toBe(false);
      });
      const node = network.nodes.lightning[0];
      expect(lightningServiceMock.payInvoice).toBeCalledWith(node, 'lnbc1', undefined);
    });

url: 'https://example.com/document/45',
    };

    fetchMock.mock('/api/documents/46/', deferred.promise, { method: 'PUT' });

    const { container, getByText } = render(
      wrapInIntlProvider(
        
          
        ,
      ),
    );

    const inputTitle = container.querySelector('#title') as HTMLInputElement;

    fireEvent.change(inputTitle!, {
      target: { value: 'updated document title' },
    });
    fireEvent.click(getByText('Submit'));
    await act(async () =>
      deferred.resolve(
        JSON.stringify({
          ...document,
          title: 'updated document title',
        }),
      ),
    );
    expect(fetchMock.called('/api/documents/46/', { method: 'PUT' })).toBe(
      true,
    );

    expect(inputTitle.value).toEqual('updated document title');

beforeEach(() => {
        fireEvent.change(subject.container.querySelector('input'), { target: { value: 'Lane Added by user' } })
        fireEvent.click(subject.queryByText('Add'))
      })