jest-vue-matcher

Additional jest matchers for vue

Install

yarn add jest-vue-matcher -D

Setup

import { mount } from '@vue/test-utils'
import matchers from 'jest-vue-matcher'
import MyComponent from '@/components/MyComponent.vue'
 
let wrapper
 
describe('MyComponent', () => {
  beforeEach(() => {
    wrapper = mount(MyComponent)
    expect.extend(matchers(wrapper))
  })
 
  // ...
})

Matchers available

• toHaveText(text)

  expect('h1').toHaveText('My title')
  expect('h1').not.toHaveText('Not my title')

• toBeADomElement()

  expect('h1').toBeADomElement()
  expect('notH1').not.toBeADomElement()

• toHaveClass(className)

  expect('h1').toHaveClass('title')
  expect('h1').not.toHaveClass('not-title')

• toHaveAttribute(attributeName, attributeValue)

  expect('h1').toHaveAttribute('class', 'title')
  expect('h1').not.toHaveAClass('class', 'not-title')

• toHaveValue(value)

  expect('input[type=text]').toHaveValue('plop')
  expect('input[type=text]').not.toHaveValue('not plop')

• toHaveProp(propName)

  expect(wrapper).toHaveProp('propName')
  expect(wrapper).not.toHaveProp('not-propName')

• toEmit(eventName)

  expect(wrapper).toEmit('eventName')
  expect(wrapper).not.toEmit('not eventName')

• toEmitWith(eventName, eventValue)

  expect(wrapper).toEmitWith('eventName', 'eventValue')
  expect(wrapper).not.toEmitWith('not eventName', { data: 'eventValue' })

Inspiration

Inspirated by mwangaben-vthelpers