How to use @vue/test-utils - 10 common examples

it('should render column sizes correctly', () => {
    // default
    const wrapper = mount({
      render () {
        return (
          
            Hello
          
        )
      }
    })
    expect(wrapper.findAll('.va-col-sm-2.va-control-label').length).toBe(1)
    expect(wrapper.findAll('.va-col-sm-10.va-flex').length).toBe(1)

    // custom label-col
    const wrapper2 = mount({
      render () {
        return (

test('snapshots should match', () => {
  const first = shallow(TestComponent, { localVue: Vue });
  const second = shallow(TestComponent, { localVue: Vue });

  // same component, no props, should match in UI and in HTML.
  expect(first.html()).toBe(second.html());
});

*/

import { config as testUtilsConfig } from '@vue/test-utils';
import jasmineDiff from 'jasmine-diff';
import $ from 'jquery';
import 'core-js/features/set-immediate';
import 'vendor/jasmine-jquery';
import '~/commons';
import Vue from 'vue';
import { getDefaultAdapter } from '~/lib/utils/axios_utils';
import Translate from '~/vue_shared/translate';

import { FIXTURES_PATH, TEST_HOST } from './test_constants';

// Tech debt issue TBD
testUtilsConfig.logModifiedComponents = false;

const isHeadlessChrome = /\bHeadlessChrome\//.test(navigator.userAgent);
Vue.config.devtools = !isHeadlessChrome;
Vue.config.productionTip = false;

let hasVueWarnings = false;
Vue.config.warnHandler = (msg, vm, trace) => {
  // The following workaround is necessary, so we are able to use setProps from Vue test utils
  // see https://github.com/vuejs/vue-test-utils/issues/631#issuecomment-421108344
  const currentStack = new Error().stack;
  const isInVueTestUtils = currentStack
    .split('\n')
    .some((line) => line.startsWith('    at VueWrapper.setProps ('));
  if (isInVueTestUtils) {
    return;
  }

// custom-jquery-matchers was written for an old Jest version, we need to make it compatible
Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
  // Don't override existing Jest matcher
  if (matcherName === 'toHaveLength') {
    return;
  }

  expect.extend({
    [matcherName]: matcherFactory().compare,
  });
});

expect.extend(customMatchers);

testUtilsConfig.deprecationWarningHandler = (method, message) => {
  const ALLOWED_DEPRECATED_METHODS = [
    // https://gitlab.com/gitlab-org/gitlab/-/issues/295679
    'finding components with `find` or `get`',

    // https://gitlab.com/gitlab-org/gitlab/-/issues/295680
    'finding components with `findAll`',
  ];
  if (!ALLOWED_DEPRECATED_METHODS.includes(method)) {
    global.console.error(message);
  }
};

Object.assign(global, {
  requestIdleCallback(cb) {
    const start = Date.now();
    return setTimeout(() => {

methods: {
        validate: validateSpy
      }
    })

    wrapper.find('input').element.value = 'test'
    wrapper.find('input').trigger('input')

    expect(wrapper.vm.currentValue).toBe('test')
    expect(validateSpy).toHaveBeenCalled()

    // reset the spy states
    validateSpy.mockClear()

    // do not validate on input
    wrapper = shallowMount(Input, {
      propsData: {
        validateMode: {
          onInput: false
        }
      },
      methods: {
        validate: validateSpy
      }
    })

    wrapper.find('input').element.value = 'test'
    wrapper.find('input').trigger('input')

    expect(validateSpy).not.toHaveBeenCalled()
  })

import baseMultiErrorExtractor from '@/templates/multi-error-extractor/baseMultiErrorExtractor'
import FormWrapper from '@/templates/form-wrapper.js'
import { required, minLength, email, maxLength } from 'vuelidate/lib/validators'
import { createLocalVue, mount } from '@vue/test-utils'
import Vuelidate from 'vuelidate'
import VueI18n from 'vue-i18n'
import _merge from 'lodash.merge'
import { i18nMessages } from '../../testData'

const localVue = createLocalVue()
localVue.use(VueI18n)
localVue.use(Vuelidate)

/**
 * Creates the testable component wrapper
 * @param opts
 * @param {ComponentOptions} [opts.componentOpts] - Override component options
 * @param {ThisTypedMountOptions} [opts.mountOpts] - Override mount options
 * @return {Wrapper}
 */
function createWrapper (opts = {}) {
  const { componentOpts = {}, mountOpts = {} } = opts
  const i18n = new VueI18n({
    locale: 'en', // set locale
    messages: i18nMessages // set locale messages
  })

import Vuex from "vuex"
import Vuelidate from "vuelidate"
import { shallowMount, createLocalVue } from "@vue/test-utils"
import TmSessionImportSuccess from "common/TmSessionImportSuccess"
// import TmBtn from "common/TmBtn"
jest.mock(`scripts/google-analytics.js`, () => () => {})
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Vuelidate)
localVue.directive(`tooltip`, () => {})
localVue.directive(`focus`, () => {})

describe(`TmSessionImportSuccess`, () => {
  let wrapper, $store, getters

  beforeEach(() => {
    getters = {}
    $store = {
      state: {
        recover: {
          name: ``,
          seed: ``,
          password: ``,

import Vue from 'vue'
import expect from 'expect'
import VueTestUtils from '@vue/test-utils'

Vue.config.productionTip = false

// IMPORTANT: DO NOT use vue-test-utils transitionStub
VueTestUtils.config.stubs.transition = false

global.expect = expect

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!index(\.js)?$)/)
srcContext.keys().forEach(srcContext)

// This Intl polyfill has some problems with number precision, so we store the original
// implementation to use it instead when that lack of accuracy is an issue
global.__Intl__ = global.Intl
global.Intl = require('intl')

HTMLCanvasElement.prototype.getContext = jest.fn()

Vue.use(VTooltip, {
  defaultHtml: false,
  defaultContainer: '#app'
})
Vue.use(directives)
Vue.use(filters)
Vue.config.ignoredElements = ['webview']

VueTestUtils.config.mocks.$eventBus = eventBus
VueTestUtils.config.mocks.$client = {
  fetchDelegates: jest.fn()
}

VueTestUtils.config.mocks.assets_loadImage = jest.fn()
VueTestUtils.config.mocks.collections_filterChildren = jest.fn()
VueTestUtils.config.mocks.currency_format = jest.fn()
VueTestUtils.config.mocks.currency_subToUnit = jest.fn()
VueTestUtils.config.mocks.electron_openExternal = jest.fn()
VueTestUtils.config.mocks.session_network = jest.fn()
VueTestUtils.config.mocks.session_profile = jest.fn()
VueTestUtils.config.mocks.wallet_fromRoute = {}

value(text, options = {}) {
            const elements = testingLibrary[`queryAll${upperFirst(query)}`](
              wrapper.element,
              text,
              options,
            );

            // Element not found, return an `ErrorWrapper`
            if (!elements.length) {
              return new ErrorWrapper(query);
            }

            return createWrapper(elements[0], this.options || {});
          },
        },