How to use @testing-library/vue - 10 common examples

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()
})

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()
})

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')
})

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('calling render with the same component but different props does not remount', async () => {
  const {getByTestId, updateProps} = render(NumberDisplay, {
    props: {number: 1},
  })

  expect(getByTestId('number-display')).toHaveTextContent('1')

  await updateProps({number: 2})

  expect(getByTestId('number-display')).toHaveTextContent('2')

  // Assert that, even after updating props, the component hasn't remounted,
  // meaning we are testing the same component instance we rendered initially.
  expect(getByTestId('instance-id')).toHaveTextContent('1')
})

test('waits for the data to be loaded', async () => {
  const {getByText, queryByText, queryByTestId} = render(Disappearance)

  // Assert initial state
  getByText('Loading...')
  expect(queryByText(/Loaded this message/)).not.toBeInTheDocument()

  // Following line reads as follows:
  // "Wait until element with text 'Loading...' is gone."
  await waitForElementToBeRemoved(() => queryByText('Loading...'))
  // It is equivalent to:
  //
  // await wait(() => {
  //   expect(queryByText('Loading...')).not.toBeInTheDocument()
  // })
  //
  // because `wait()` waits until the callback function passes or times out.

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')
})