vue-test-helpers

2.0.0 verified Sat May 09 auth: no javascript maintenance

Helpers and syntactic sugars on top of @vue/test-utils v1 (beta). v2.0.0 provides global registration of mount/shallowMount, and extends Wrapper with methods like has, hasAll, hasAny, hasNone, hasClass, hasAttribute, hasProp, hasEmitted, id, and event triggers (click, dblclick, etc.) with chaining. Designed for Vue 2 projects using vue-test-utils beta; not compatible with Vue 3 or @vue/test-utils v2. Low maintenance cadence, last release 2019.

Common errors

error Cannot find module '@vue/test-utils' ↓

cause Missing peer dependency.

fix

npm install --save-dev @vue/test-utils@^1.0.0-beta.20

error TypeError: wrapper.hasClass is not a function ↓

cause setupHelpers() not called before test or helpers not applied.

fix

Ensure setupHelpers() is called in test setup (e.g., Jest's setupFilesAfterEnv).

Warnings

breaking Package targets @vue/test-utils v1 beta only. Not compatible with @vue/test-utils v2 (Vue 3). ↓

fix Use vue-test-helpers with Vue 2 and @vue/test-utils@^1.0.0-beta.20. For Vue 3, use @vue/test-utils v2 directly.

deprecated hasClass, hasAttribute, and hasProp are reimplementations of deprecated methods from vue-test-utils. They may be removed in future vue-test-utils v1 releases. ↓

fix Consider using vue-test-utils' built-in alternatives like classes() or attributes() for cross-version compatibility.

gotcha Global registration of mount and shallowMount via setupHelpers can cause conflicts if tests import them explicitly. ↓

fix Call setupHelpers({ registerGlobals: false }) and import from '@vue/test-utils' manually.

Install

npm install vue-test-helpers

yarn add vue-test-helpers

pnpm add vue-test-helpers

Imports

setupHelpers (default export)
wrong
```
const setupHelpers = require('vue-test-helpers')
```
correct
```
import setupHelpers from 'vue-test-helpers'
```
Package uses ESM default export; CommonJS require works if your environment supports it, but ESM is preferred.
mount (global after setup)
wrong
```
import { mount } from 'vue-test-helpers'
```
correct
```
// after import setupHelpers from 'vue-test-helpers'; setupHelpers() // mount is now globally available
```
mount is re-exported globally from @vue/test-utils by setupHelpers(), but not exported from the package itself. Don't import from this package.
shallow (global after setup, alias for shallowMount)
wrong
```
import { shallow } from 'vue-test-helpers'
```
correct
```
// after setupHelpers(), shallow is globally available
```
shallow is an alias for shallowMount made global by setupHelpers(). Not a direct export.

Quickstart

Shows global setup and usage of hasClass, hasEmitted, hasProp, and event triggers.

// Install: npm install --save-dev vue-test-helpers @vue/test-utils@^1.0.0-beta.20
// Setup file (e.g., jest setupFilesAfterEnv):
import setupHelpers from 'vue-test-helpers';
setupHelpers();

// In test:
import { shallowMount } from '@vue/test-utils'; // or use global mount/shallow
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('has a button with class primary', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.find('button').hasClass('primary')).toBe(true);
  });

  it('emits click event', () => {
    const wrapper = shallowMount(MyComponent);
    wrapper.find('button').click();
    expect(wrapper.hasEmitted('click')).toBe(true);
  });

  it('has prop foo with value bar', () => {
    const wrapper = shallowMount(MyComponent, { propsData: { foo: 'bar' } });
    expect(wrapper.hasProp('foo', 'bar')).toBe(true);
  });
});