How to use the @testing-library/vue.render 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()
})

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.

declare const elem: HTMLElement;
declare const input: HTMLInputElement;
declare const select: HTMLSelectElement;
declare const option: HTMLOptionElement;
declare const textarea: HTMLTextAreaElement;

const SomeComponent = Vue.extend({
    name: 'SomeComponent',
    props: {
        foo: Number,
        bar: String,
    },
});

lib.render(Vue);
lib.render(SomeComponent);
const component = lib.render(SomeComponent, {
    // options for new Vue()
    name: 'SomeComponent',
    methods: {
        glorb() { return 42; }
    },
    // options for vue-test-utils mount()
    slots: {
        quux: "<p>Baz</p>",
    },
    mocks: {
        isThisFake() { return true; }
    },
    // options for vue-testing-library render()
    props: {

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('renders functional component', () => {
  const {getByText} = render(Functional)

  getByText('Hi!')
})

it('renders props.msg when passed', () => {
    const name = 'tester'

    const { findByText } = render(WelcomeMessage, {
      propsData: { name }
    })

    findByText('Hello tester from my Vue.js page, built with Webpack 4!')
  })
})

test('Form contains search button', () => {
  const {getByText} = render(Stubs, {
    stubs: ['FontAwesomeIcon'],
  })
  getByText('Search now')
})