How to use the @testing-library/vue.fireEvent.click function in @testing-library/vue

test('unmounts a component', async () => {
  jest.spyOn(console, 'error').mockImplementation(() => {})

  const {unmount, isUnmounted, getByText} = render(StopWatch)
  await fireEvent.click(getByText('Start'))

  // Destroys a Vue component instance.
  unmount()

  expect(isUnmounted()).toBe(true)

  await wait()

  expect(console.error).not.toHaveBeenCalled()
})

const startButton = getByText('Start')
  const elapsedTime = getByTestId('elapsed')

  // Assert initial state.
  expect(elapsedTime).toHaveTextContent('0ms')
  getByText('Start')

  await fireEvent.click(startButton)

  getByText('Stop')

  // Wait for one tick of the event loop.
  await wait()

  // Stop the timer.
  await fireEvent.click(startButton)

  // We can't assert a specific amount of time. Instead, we assert that the
  // content has changed.
  expect(elapsedTime).not.toHaveTextContent('0ms')
})

test('emits click event when button is clicked', async () => {
  const text = 'Click me'

  const {getByRole, emitted} = render(Button, {
    props: {text},
  })

  // Send a click event.
  await fireEvent.click(getByRole('button'))

  // Expect that the event emitted a "click" event. We should test for emitted
  // events has they are part of the public API of the component.
  expect(emitted()).toHaveProperty('click')
})

test('mocks an API call when load-greeting is clicked', async () => {
  axiosMock.get.mockImplementationOnce(() =>
    Promise.resolve({
      data: {greeting: 'hello there'},
    }),
  )

  const {html, getByText} = render(Component, {props: {url: '/greeting'}})

  await fireEvent.click(getByText('Fetch'))

  expect(axiosMock.get).toHaveBeenCalledTimes(1)
  expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
  getByText('hello there')

  // You can render component snapshots by using html(). However, bear in mind
  // that Snapshot Testing should not be treated as a replacement for regular
  // tests.
  // More about the topic: https://twitter.com/searls/status/919594505938112512
  expect(html()).toMatchInlineSnapshot(`
    <div><button>
        Fetch
      </button> <span>
        hello there
      </span></div>
  `)

test('full app rendering/navigating', async () => {
  // Notice how we pass a `routes` object to our render function.
  const {queryByTestId} = render(App, {routes})

  expect(queryByTestId('location-display')).toHaveTextContent('/')

  await fireEvent.click(queryByTestId('about-link'))

  expect(queryByTestId('location-display')).toHaveTextContent('/about')
})

vue.use(Vuei18n)

    const i18n = new Vuei18n({
      locale: 'en',
      fallbackLocale: 'en',
      messages,
    })

    // Notice how we return an object from the callback function. It will be
    // available as an additional option on the created Vue instance.
    return {i18n}
  })

  expect(getByText('Hello')).toBeInTheDocument()

  await fireEvent.click(getByText('Japanese'))

  expect(getByText('こんにちは')).toBeInTheDocument()

  expect(queryByText('Hello')).toBeNull()
})

expect(ratingSelect.checked).toBe(true)
  expect(initiallySelectedInput.checked).toBe(false)

  // Get the Input element by its implicit ARIA role.
  const recommendInput = getByRole('checkbox')

  expect(recommendInput.checked).toBe(false)
  await fireEvent.update(recommendInput)
  expect(recommendInput.checked).toBe(true)

  // Make sure the submit button is enabled.
  expect(submitButton).toBeEnabled()
  expect(submitButton).toHaveAttribute('type', 'submit')

  await fireEvent.click(submitButton)

  // Assert the right event has been emitted.
  expect(emitted()).toHaveProperty('submit')
  expect(emitted().submit[0][0]).toMatchObject(fakeReview)
})

test('renders a Vuetify-powered component', async () => {
  const {getByText} = renderWithVuetify(VuetifyDemoComponent)

  await fireEvent.click(getByText('open'))

  expect(getByText('Lorem ipsum dolor sit amet.')).toMatchInlineSnapshot(`
    <div class="v-card__text">
      Lorem ipsum dolor sit amet.
    </div>
  `)
})

test('navigating programmatically', async () => {
  const { queryByTestId } = render(App, { routes })

  expect(queryByTestId('location-display')).toHaveTextContent('/')
  await fireEvent.click(queryByTestId('go-to-about'))

  expect(queryByTestId('location-display')).toHaveTextContent('/about')
})

test('can render with vuex with defaults', async () => {
  const {getByTestId, getByText} = renderVuexTestComponent()
  await fireEvent.click(getByText('+'))

  expect(getByTestId('count-value')).toHaveTextContent('1')
})