Ir para o conteúdo principal

API

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

A Vue Testing Library reexporta tudo do DOM Testing Library.

Ela também expõe estes métodos:

render(Component, options)​

A função render é a única maneira de renderizar componentes na Vue Testing Library.

Ela recebe até 2 parâmetros e retorna um objeto com alguns métodos auxiliares.

function render(Component, options) {
  return {
    ...DOMTestingLibraryQueries,
    container,
    baseElement,
    debug(element),
    unmount,
    html,
    emitted,
    rerender(props),
  }
}

Parâmetros​

Componente​

O componente Vue válido a ser testado.

Opções​

Um objeto contendo informações adicionais a serem passadas para o mount do @vue/test-utils.

Além disso, as seguintes opções também podem ser fornecidas:

store (Object | Store)​

A definição de objeto de uma store Vuex. Se um objeto store for fornecido, a Vue Testing Library importará e configurará uma store Vuex. Se uma store Vuex instanciada for passada, ela será usada.

routes (Array | VueRouter)​

Um conjunto de rotas para o Vue Router. Se routes for fornecido, a biblioteca importará e configurará o Vue Router. Se um Vue Router instanciado for passado, ele será usado.

props (Object)​

Será mesclado com propsData.

slots (Object)​

Usado para fornecer conteúdo de slots ao renderizar o componente. As chaves são nomes de slots, e os valores podem ser strings, trechos de template ou componentes, semelhante à forma como os slots são definidos no Vue Test Utils.

Por exemplo:

render(MyComponent, {
  slots: {
    default: 'Default',
    first: h('h1', {}, 'Named Slot'),
    second: Bar
  },
})
container (HTMLElement)​

Por padrão, a Vue Testing Library criará uma div e a anexará ao baseElement. É aqui que seu componente será renderizado. Se você fornecer seu próprio container HTMLElement por meio desta opção, ele não será anexado ao baseElement automaticamente.

Exemplo: ao testar um elemento tablebody, ele não pode ser filho de uma div. Neste caso, você pode especificar uma table como container de renderização.

const table = document.createElement('table')

const {container} = render(TableBody, {
  props,
  container: document.body.appendChild(table),
})
baseElement (HTMLElement)​

Se o container for especificado, então o padrão será ele, caso contrário, o padrão será document.body. O baseElement é usado como o elemento base para as consultas e também para o que é impresso quando você usa debug().

Resultado do render​

O método render retorna um objeto com estas propriedades:

...queries​

A principal característica do render é que as consultas da DOM Testing Library são automaticamente retornadas com seu primeiro argumento vinculado ao baseElement, que por padrão é document.body.

Veja Queries para a lista completa.

const {getByLabelText, queryAllByTestId} = render(Component)

container​

O nó DOM que contém seu componente Vue renderizado. Por padrão, é uma div. Este é um nó DOM comum, então você pode chamar container.querySelector etc. para inspecionar os filhos.

Dica: para obter o elemento raiz do seu componente renderizado, use container.firstChild.

🚨 Se você se pegar usando container para consultar elementos renderizados,
reconsidere! As outras consultas são projetadas para serem mais resilientes a
alterações no componente sendo testado. Evite usar container para consultar elementos!

baseElement​

O nó DOM que contém onde seu componente Vue é renderizado no container. Se você não especificar o baseElement nas opções do render, o padrão será document.body.

Isso é útil quando o componente que você deseja testar renderiza algo fora do div do container, por exemplo, quando você deseja testar com snapshot um componente de portal que renderiza seu HTML diretamente no body.

Nota: as consultas retornadas pelo render procuram no baseElement, então você pode usar consultas para testar seu componente de portal sem o baseElement.

debug(element)​

Este método é um atalho para console.log(prettyDOM(element)).

import {render} from '@testing-library/vue'

const HelloWorldComponent = {
  template: `<h1>Hello World</h1>`,
}

const {debug} = render(HelloWorldComponent)
debug()
// <div>
//   <h1>Hello World</h1>
// </div>

Este é um wrapper simples em torno do prettyDOM, que também é exposto e vem da DOM Testing Library.

unmount()​

Um alias para o método unmount do @vue/test-utils.

html()​

Um alias para o método html do @vue/test-utils.

emitted()​

Um alias para o método emitted do @vue/test-utils.

rerender(props)​

Um alias para o método setProps do @vue/test-utils.

Retorna uma Promise para que você possa usar await rerender(...).

fireEvent​

Como o Vue aplica atualizações no DOM de forma assíncrona durante novas renderizações, as ferramentas fireEvent são reexportadas como funções async. Para garantir que o DOM seja atualizado corretamente após um evento em um teste, é recomendado sempre usar await com fireEvent.

await fireEvent.click(getByText('Click me'))

Além disso, a Vue Testing Library expõe dois métodos úteis:

touch(elem)​

Dispara ambos os eventos focus() e blur().

await fireEvent.touch(getByLabelText('username'))

// Same as:
await fireEvent.focus(getByLabelText('username'))
await fireEvent.blur(getByLabelText('username'))

update(elem, value)​

Lida corretamente com inputs controlados por v-model. Atualiza o valor interno de inputs/selects/textarea enquanto emite o evento nativo apropriado.

Veja um exemplo funcional do update no teste de exemplo com v-model.

cleanup​

Desmonta árvores Vue que foram montadas com render.

Isso é chamado automaticamente se seu framework de testes (como Mocha, Jest ou Jasmine) injetar uma função global afterEach() no ambiente de testes. Caso contrário, você precisará chamar cleanup() após cada teste.

Deixar de chamar cleanup após usar render pode resultar em vazamentos de memória e testes não idempotentes (o que pode causar erros difíceis de depurar nos seus testes).