Jest-vue-matcher: Additional jest matchers for vue

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

GitHub

https://github.com/14nrv/jest-vue-matcher