API

O método mount()

• Argumentos:

  • {Component} component
  • {Object} options

• Retorna: {Wrapper}

• Opções:

Consulte as opções

• Uso:

Cria um Wrapper (envolvedor) que contém o componente Vue montado e renderizado.

Sem as opções:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

Com as opções do Vue:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.props().color).toBe('red')
  })
})

Ligar ao DOM:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const wrapper = mount(Foo, {
      attachTo: div
    })
    expect(wrapper.contains('div')).toBe(true)
    wrapper.destroy()
  })
})

Encaixes padrão e nomeados:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Corresponderá a `<slot name="FooBar" />`.
        foo: '<div />'
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

Forjando propriedades globais:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = mount(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

Forjando componentes:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import Faz from './Faz.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      stubs: {
        BarFoo: true,
        FooBar: Faz,
        Bar: { template: '<div class="stubbed" />' }
      }
    })
    expect(wrapper.contains('.stubbed')).toBe(true)
    expect(wrapper.contains(Bar)).toBe(true)
  })
})

Nota de Depreciação:

Quando você estiver forjando componentes, o fornecimento de uma string (ComponentToStub: '<div class="stubbed" />) já não é suportado.

• Consulte também: Wrapper (envolvedor)

O método shallowMount()

• Argumentos:

  • {Component} component
  • {Object} options
    • {HTMLElement|string} string
    • {boolean} attachToDocument
    • {Object} context
      • {Array<Component|Object>|Component} children
    • {Object} slots
      • {Array<Component|Object>|Component|String} default
      • {Array<Component|Object>|Component|String} named
    • {Object} mocks
    • {Object|Array<string>} stubs
    • {Vue} localVue

• Retorna: {Wrapper}

• Opções:

Consulte as opções

• Uso:

Tal como o mount, ele cria um Wrapper (envolvedor) que contém o componente Vue montado e renderizado, mas com componentes filhos forjados.

Sem as opções:

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

Com as opções do Vue:

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.props().color).toBe('red')
  })
})

Ligar ao DOM:

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const wrapper = shallowMount(Foo, {
      attachTo: div
    })
    expect(wrapper.contains('div')).toBe(true)
    wrapper.destroy()
  })
})

Encaixes padrão e nomeados:

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Corresponderá a <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

Forjando propriedades globais:

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = shallowMount(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})

O método render()

• Argumentos:

  • {Component} component
  • {Object} options
    • {Object} context
      • {Array<Component|Object>|Component} children
    • {Object} slots
      • {Array<Component|Object>|Component|String} default
      • {Array<Component|Object>|Component|String} named
    • {Object} mocks
    • {Object|Array<string>} stubs
    • {Vue} localVue

• Retorna: {Promise<CheerioWrapper>}

• Opções:

Consulte as opções

• Uso:

Transforma um objeto em uma string e retorna um cheerio wrapper (envolvedor).

Cheerio é uma biblioteca parecida com o JQuery para atravessar o DOM dentro do Node.js. Ela tem uma API semelhante ao Wrapper (envolvedor) da Vue Test Utils.

O render usa vue-server-renderer nos bastidores, para transformar um componente em HTML estático.

O render está incluído dentro do pacote @vue/server-test-utils.

Sem as opções:

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo)
    expect(wrapper.text()).toContain('<div></div>')
  })
})

Com as opções do Vue:

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.text()).toContain('red')
  })
})

Encaixes padrão e nomeados:

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Corresponderá a <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.text()).toContain('<div></div>')
  })
})

Forjando propriedades globais:

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = await render(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.text()).toContain($route.path)
  })
})

O método renderToString()

• Argumentos:

  • {Component} component
  • {Object} options
    • {Object} context
      • {Array<Component|Object>|Component} children
    • {Object} slots
      • {Array<Component|Object>|Component|String} default
      • {Array<Component|Object>|Component|String} named
    • {Object} mocks
    • {Object|Array<string>} stubs
    • {Vue} localVue

• Retorna: {Promise<string>}

• Opções:

Consulte as opções

• Uso:

Transforma um componente em HTML.

O renderToString usa o vue-server-renderer nos bastidores, para transformar um componente em HTML.

O renderToString está incluído dentro do pacote @vue/server-test-utils.

Sem as opções:

import { renderToString } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo)
    expect(str).toContain('<div></div>')
  })
})

Com as opções do Vue:

import { renderToString } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(str).toContain('red')
  })
})

Encaixes padrão e nomeados:

import { renderToString } from '@vue/server-test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const str = await renderToString(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Corresponderá a <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(str).toContain('<div></div>')
  })
})

Forjando propriedades globais:

import { renderToString } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const $route = { path: 'http://www.example-path.com' }
    const str = await renderToString(Foo, {
      mocks: {
        $route
      }
    })
    expect(str).toContain($route.path)
  })
})

Os seletores

Há muitos métodos que recebem um seletor como um argumento. Um seletor pode ser tanto um seletor CSS, um componente do Vue, ou um método find de objeto.

Seletores CSS

O mount manipula qualquer seletor css válido:

• seletores de tags (div, foo, bar)
• seletores de classe (.foo, .bar)
• seletores de atributos ([foo], [foo="bar"])
• seletores de id (#foo, #bar)
• pseudo-seletores (div:first-of-type)

You can also use combinators: Você também pode usar combinações:

• combinador de descendente direto (div > #bar > .foo)
• combinador de descendente genérico (div #bar .foo)
• seletor de irmão adjacente (div + .foo)
• seletor de irmão genérico (div ~ .foo)

Componentes do Vue

Os componentes do Vue também são seletores válidos.

// Foo.vue

export default {
  name: 'FooComponent'
}

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallowMount(Foo)
expect(wrapper.is(Foo)).toBe(true)

Método Find de Objeto

Name (nome)

Ao usar um método find de objeto, o Vue Test Utils permite a seleção de elementos pelo name do componente no wrapper (envolvedor) de componentes.

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

Ref (referência)

Ao usar um método find de objeto, o Vue Test Utils permite a seleção de elementos pelo $ref no wrapper (envolvedor) de componentes.

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')

O método createLocalVue()

• Argumentos:

  • {Object} options
    • {Function} errorHandler

• Retorna:

  • {Component}

• Uso:

O createLocalVue retorna uma classe do Vue para você adicionar componentes, mixins (combinadores) e instalar plugins sem poluir a classe global do Vue.

A opção errorHandler pode ser usada para manipular erros não capturados durante a função de renderizar do componente e observadores.

Use ele com options.localVue:

Sem as opções:

import { createLocalVue, shallowMount } from '@vue/test-utils'
import MyPlugin from 'my-plugin'
import Foo from './Foo.vue'

const localVue = createLocalVue()
localVue.use(MyPlugin)
const wrapper = shallowMount(Foo, {
  localVue,
  mocks: { foo: true }
})
expect(wrapper.vm.foo).toBe(true)

const freshWrapper = shallowMount(Foo)
expect(freshWrapper.vm.foo).toBe(false)

Com a opção errorHandler:

import { createLocalVue, shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const errorHandler = (err, vm, info) => {
  expect(err).toBeInstanceOf(Error)
}

const localVue = createLocalVue({
  errorHandler
})

// Foo lança um erro dentro um gatilho do ciclo de vida
const wrapper = shallowMount(Foo, {
  localVue
})

• Consulte também: Dicas Comuns

O método createWrapper(node [, options])

• Argumentos:

  • {vm|HTMLElement} node
  • {Object} options
    • {Boolean} attachedToDocument

• Retorna:

  • {Wrapper}

• Uso:

O createWrapper cria um Wrapper para uma instância do Vue montada, ou um elemento HTML.

import { createWrapper } from '@vue/test-utils'
import Foo from './Foo.vue'

const Constructor = Vue.extend(Foo)
const vm = new Constructor().$mount()
const wrapper = createWrapper(vm)
expect(wrapper.vm.foo).toBe(true)

Configuração

A Vue Test Utils incluem um objeto de configuração para as opções definidas usadas pela Vue Test Utils.

Opções de Configuração da Vue Test Utils

showDeprecationWarnings

• tipo: Boolean
• valor padrão: true

Controla se ou não mostrar avisos de depreciação. Quando definida para true, todos avisos de depreciação são visíveis na consola.

Exemplo:

import { config } from '@vue/test-utils'

config.showDeprecationWarnings = false

deprecationWarningHandler

• tipo: Function

Permite controle delicado sobre os avisos de depreciação. Quando showDeprecationWarnings é definido para true, todos avisos de depreciação serão passados para este manipulador com o nome do método como primeiro argumento e a mensagem original como segundo argumento.

TIP

Isto poderia ser útil para registar mensagens de depreciação para separar a localização ou ajudar numa atualização gradual de base de código para última versão do utilitários de teste pela ignorância de certas funções de avisos depreciadas

Exemplo:

import { config } from '@vue/test-utils'

config.showDeprecationWarnings = true
config.deprecationWarningHandler = (method, message) => {
  if (method === 'emittedByOrder') return

  console.error(message)
}

stubs

• tipo: { [name: string]: Component | boolean | string }
• valor padrão: {}

O forjado guardado dentro de config.stubs é usado por padrão. Forjados para usar dentro de componentes. Estes são sobrescritos pelo stubs passado dentro das opções em montagem.

Quando estiver passando stubs como um arranjo dentro de opções em montagem, os config.stubs são convertidos para um arranjo, e forjarão componentes com um componente básico que retornam <${component name}-stub>.

Exemplo:

import { config } from '@vue/test-utils'

config.stubs['my-component'] = '<div />'

mocks

• tipo: Object
• valor padrão: {}

Tal como nos stubs, os valores passados para o config.mocks são usados por padrão. Quaisquer valores passados para as opções de montagem do objeto mocks terão prioridade sobre aqueles declarados dentro de config.mocks.

Exemplo:

import { config } from '@vue/test-utils'

config.mocks['$store'] = {
  state: {
    id: 1
  }
}

methods

• tipo: { [name: string]: Function }
• valor padrão: {}

Você pode configurar métodos padrão usando o objeto config. Isto podem ser útil para plugins que injetam métodos aos componentes, tal como o VeeValidate. Você pode sobrescrever métodos definidos dentro de config ao passar os methods dentro das opções em montagem.

Exemplo:

import { config } from '@vue/test-utils'

config.methods['getData'] = () => {}

provide

• tipo: Object
• valor padrão: {}

Tal como em stubs ou mocks, os valores passados para o config.provide são usados por padrão. Quaisquer valores passados para opções em montagem do objeto provide terão prioridade sobre aqueles declarados dentro de config.provide. Por favor repare que isto não é suportado para passar uma função como config.provide.

Exemplo:

import { config } from '@vue/test-utils'

config.provide['$logger'] = {
  log: (...args) => {
    console.log(...args)
  }
}

O método enableAutoDestroy(hook)

• Argumentos:

  • {Function} hook

• Uso:

O método enableAutoDestroy destruirá todas as instâncias de Wrapper (envolvedor) usando a função gatilho passada (por exemplo o afterEach). Depois de chamar o método, você pode reverter para o comportamento padrão ao chamar o método resetAutoDestroyState.

import { enableAutoDestroy, mount } from '@vue/test-utils'
import Foo from './Foo.vue'

// chama wrapper.destroy() depois de cada teste
enableAutoDestroy(afterEach)

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
    // não há necessidade de chamar wrapper.destroy() aqui
  })
})

A função resetAutoDestroyState

• Uso:

Depois de chamar enableAutoDestroy você pode precisar desativar o comportamento de autodestruição (por exemplo quando algum do seu conjunto de testes depender do wrapper (envolvedor) ser persistente através de testes separados)

Para alcançar isso você pode chamar resetAutoDestroyState para desativar o gatilho registado anteriormente

import {
  enableAutoDestroy,
  resetAutoDestroyState,
  mount
} from '@vue/test-utils'
import Foo from './Foo.vue'

// chama wrapper.destroy() depois de cada teste
enableAutoDestroy(afterEach)
// redefine a autodestruição depois do conjunto terminar
afterAll(resetAutoDestroyState)

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
    // não há necessidade de chamar wrapper.destroy() aqui
  })
})