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

test('x-model binds checkbox value', async () => {
    document.body.innerHTML = `
        <div>
            <input type="checkbox">

            <span></span>
        </div>
    `

    Alpine.start()

    expect(document.querySelector('input').checked).toEqual(true)
    expect(document.querySelector('span').getAttribute('bar')).toEqual("true")

    fireEvent.change(document.querySelector('input'), { target: { checked: false }})

    await wait(() =&gt; { expect(document.querySelector('span').getAttribute('bar')).toEqual("false") })
})

document.body.innerHTML = `
        <div>
            <input value="bar" type="checkbox">
            <input value="baz" type="checkbox">

            <span></span>
        </div>
    `

    Alpine.start()

    expect(document.querySelectorAll('input')[0].checked).toEqual(true)
    expect(document.querySelectorAll('input')[1].checked).toEqual(false)
    expect(document.querySelector('span').getAttribute('bar')).toEqual("bar")

    fireEvent.change(document.querySelectorAll('input')['1'], { target: { checked: true }})

    await wait(() =&gt; {
        expect(document.querySelectorAll('input')[0].checked).toEqual(true)
        expect(document.querySelectorAll('input')[1].checked).toEqual(true)
        expect(document.querySelector('span').getAttribute('bar')).toEqual("bar,baz")
    })
})

document.body.innerHTML = `
        <div>
            <input value="bar" type="radio">
            <input value="baz" type="radio">

            <span></span>
        </div>
    `

    Alpine.start()

    expect(document.querySelectorAll('input')[0].checked).toEqual(true)
    expect(document.querySelectorAll('input')[1].checked).toEqual(false)
    expect(document.querySelector('span').getAttribute('bar')).toEqual('bar')

    fireEvent.change(document.querySelectorAll('input')[1], { target: { checked: true }})

    await wait(() =&gt; {
        expect(document.querySelectorAll('input')[0].checked).toEqual(false)
        expect(document.querySelectorAll('input')[1].checked).toEqual(true)
        expect(document.querySelector('span').getAttribute('bar')).toEqual('baz')
    })
})

function selectOption(select, option) {
  fireEvent.mouseOver(option);
  fireEvent.mouseMove(option);
  fireEvent.mouseDown(option);
  fireEvent.focus(option);
  fireEvent.mouseUp(option);
  fireEvent.click(option);

  option.selected = true;

  fireEvent.change(select);
}

function fireChangeEvent(event) {
  fireEvent.change(event.target);
  event.target.removeEventListener("blur", fireChangeEvent);
}

it('should close the modal', async () => {
      const { getByText, getByLabelText, store } = await renderComponent();
      fireEvent.change(getByLabelText('Amount (sats)'), { target: { value: '1000' } });
      await wait(() => fireEvent.click(getByText('Create Invoice')));
      await wait(() => fireEvent.click(getByText('Copy & Close')));
      expect(store.getState().modals.createInvoice.visible).toBe(false);
      expect(getByText('Copied Invoice to the clipboard')).toBeInTheDocument();
    });

it('should display an error if mining fails', async () => {
    bitcoindServiceMock.sendFunds.mockRejectedValue(new Error('connection failed'));
    const { input, btn, findByText } = renderComponent();
    const numBlocks = 5;
    fireEvent.change(input, { target: { value: numBlocks } });
    fireEvent.click(btn);
    expect(await findByText(/connection failed/)).toBeInTheDocument();
  });
});

it('should display an error if renaming fails', async () => {
      const { getByLabelText, getByText, findByDisplayValue } = renderComponent('1');
      fireEvent.mouseOver(getByLabelText('icon: more'));
      await wait(() => jest.runOnlyPendingTimers());
      fireEvent.click(getByText('Rename'));
      const input = await findByDisplayValue('test network');
      fireEvent.change(input, { target: { value: '' } });
      fireEvent.click(getByText('Save'));
      await wait(() => jest.runOnlyPendingTimers());
      expect(getByText('Failed to rename the network')).toBeInTheDocument();
    });
  });

it('should open a channel successfully', async () => {
      const { getByText, getByLabelText, store, network } = await renderComponent();
      act(() => store.getActions().modals.showOpenChannel({ from: 'bob', to: 'alice' }));
      fireEvent.change(getByLabelText('Capacity (sats)'), { target: { value: '1000' } });
      fireEvent.click(getByLabelText('Deposit enough funds to bob to open the channel'));
      fireEvent.click(getByText('Open Channel'));
      await wait(() => {
        expect(store.getState().modals.openChannel.visible).toBe(false);
      });
      const node2 = network.nodes.lightning[1];
      expect(lightningServiceMock.openChannel).toBeCalledWith(node2, 'asdf@host', 1000);
      expect(bitcoindServiceMock.mine).toBeCalledTimes(1);
    });

const type = (input: HTMLElement, text: string) => {
  fireEvent.change(input, { target: { value: text } });
};