vue-test-utils hasClass example

vue-test-utils-overview.js

import { mount } from 'vue-test-utils'
import Component from '@/components/ComponentToTest'

const wrapper = mount(ComponentToTest)

// Traversal
const Foo = wrapper.find(Foo)
const divs = wrapper.findAll('div')
const div = divs.at(0)

// Actions
Foo.setData({ foo: true })
Foo.setProps({ bar: true })
div.trigger('click')

// Assertions
expect(Foo.hasProp('bar', 'foobar')).toBe(true)
expect(div.hasClass('foo')).toBe(true)
expect(div.hasStyle('color', 'red')).toBe(true)
expect(div.is('.foo')).toBe(true)

It appears that hasClass() will be deprecated in test-utils v1. The new prefered method is to use "classes()" instead, like so:

expect(div.classes()).toContain('foo')

hasStyle() will also be deprecated:

expect(div.element.styles.color).toBe('red')

How to check if a class does not exist in element

something like
expect(div.hasClass('foo')).toBe(false)

how to do it using classes()

@Uthpala

expect(div.classes()).not.toContain('foo')

@Uthpala

expect(div.classes()).not.toContain('foo')

This is an oldie but a goodie, thank you @Uthpala!