shallow.md

shallow(composant {, options}])

• Paramètres :

  • {Component} component : un composant Vue
  • {Object} options
    • {boolean} attachToDocument : attacher au document
    • {Object} context
    • {Object} slots
      • {Array<Componet|Object>|Component|String} default : défaut
      • {Array<Componet|Object>|Component|String} named : nommés
    • {Object} mocks : imitations
    • {Object|Array<string>} stubs
    • {boolean} clone
    • {Object} children : enfant
    • {Vue} localVue : instance locale de Vue

• Retourne : {Wrapper}

• Options :

Voir options

• Utilisation :

Retourne un Wrapper du premier nœud du DOM ou le composant Vue correspondant au sélecteur.

Substitue tous les composants enfants.

Utilise n'importe quel sélecteur valide

Sans options :

import { shallow } from 'vue-test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('rend une div', () => {
    const wrapper = shallow(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

Avec des options Vue :

import { shallow } from 'vue-test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('rend une div', () => {
    const wrapper = shallow(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.hasProp('color', 'red')).toBe(true)
  })
})

Attacher au DOM :

import { shallow } from 'vue-test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('rend une div', () => {
    const wrapper = shallow(Foo, {
      attachToDocument: true
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

Slots par défaut et nommés :

import { shallow } from 'vue-test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('rend une div', () => {
    const wrapper = shallow(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // Va correspondre à <slot name="FooBar" />,
        foo: '<div />'
      }
    })
    expect(wrapper.find('div')).toBe(true)
  })
})

Substituer des propriétés globales :

import { shallow } from 'vue-test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'

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