How to use the @testing-library/dom.fireEvent.input function in @testing-library/dom

async type(element, text, userOpts = {}) {
    if (element.disabled) return;
    const defaultOpts = {
      allAtOnce: false,
      delay: 0
    };
    const opts = Object.assign(defaultOpts, userOpts);
    if (opts.allAtOnce) {
      if (element.readOnly) return;
      fireEvent.input(element, { target: { value: text } });
    } else {
      let actuallyTyped = "";
      for (let index = 0; index < text.length; index++) {
        const char = text[index];
        const key = char; // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
        const keyCode = char.charCodeAt(0);

        if (opts.delay > 0) await wait(opts.delay);

        const downEvent = fireEvent.keyDown(element, {
          key: key,
          keyCode: keyCode,
          which: keyCode
        });
        if (downEvent) {
          const pressEvent = fireEvent.keyPress(element, {

beforeEach(() => {
      isFirefox.mockReturnValue(false)
      jest.spyOn(console, 'error')
      console.error.mockImplementation(() => {}) // eslint-disable-line no-console
      render(`
        <form id="blah" method="get" action="/kaki.html">
            <input type="text">
            <button>asdfsd</button>
            <button style="display:none" type="submit">sub</button>
        </form>
      `)
      inputElement = window.document.querySelector('form input')
      recorder.attach()
      fireEvent.focus(inputElement)
      fireEvent.input(inputElement, { target: { value: 'blah' } })
    })

test('x-model updates value when updated via input event', async () => {
    document.body.innerHTML = `
        <div>
            <input>
        </div>
    `

    Alpine.start()

    fireEvent.input(document.querySelector('input'), { target: { value: 'baz' }})

    await wait(() =&gt; { expect(document.querySelector('input').value).toEqual('baz') })
})

global.MutationObserver = class {
        constructor(callback) { runObservers.push(callback) }
        observe() {}
    }

    document.body.innerHTML = `
        <div id="A">
            <input>
            <span></span>
        </div>
    `

    Alpine.start()

    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})

    await wait(() =&gt; { expect(document.querySelector('#A span').innerText).toEqual('bar') })

    const div = document.createElement('div')
    div.setAttribute('id', 'B')
    div.setAttribute('x-data', '{ foo: "baz" }')
    div.innerHTML = `
        <input>
        <span></span>
    `
    document.body.appendChild(div)

    runObservers[1]([
        { addedNodes: [ div ] }
    ])

const fillFileNameModal = async (value, submitText = 'Create file') => {
  const modal = await screen.findByTestId('ide-new-entry');

  const nameField = await findByTestId(modal, 'file-name-field');
  fireEvent.input(nameField, { target: { value } });

  const createButton = getByText(modal, submitText, { selector: 'button' });
  createButton.click();
};

export const commit = async ({ newBranch = false, newMR = false, newBranchName = '' } = {}) => {
  switchLeftSidebarTab('Commit');
  screen.getByTestId('begin-commit-button').click();

  if (!newBranch) {
    const option = await screen.findByLabelText(/Commit to .+ branch/);
    option.click();
  } else {
    const option = await screen.findByLabelText('Create a new branch');
    option.click();

    const branchNameInput = await screen.findByTestId('ide-new-branch-name');
    fireEvent.input(branchNameInput, { target: { value: newBranchName } });

    const mrCheck = await screen.findByLabelText('Start a new merge request');
    if (Boolean(mrCheck.checked) !== newMR) {
      mrCheck.click();
    }
  }

  screen.getByText('Commit').click();
};