How to use the @vue/test-utils.config.logModifiedComponents function in @vue/test-utils

*/

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;
  }

import { mount, config } from '@vue/test-utils'
import HeadingBlock from '@/components/blocks/HeadingBlock.vue'
import * as BlockTypes from '@/types/Blocks'
config.logModifiedComponents = false

describe('HeadingBlock.vue', () => {
  test('renders correctly', () => {
    const block: BlockTypes.HeadingBlock = {
      id: '123',
      type: BlockTypes.BlockType.Heading,
      payload: {
        size: 'h2',
        body: 'foo'
      },
      children: []
    }
    const wrapper = mount(HeadingBlock, {
      propsData: {
        block
      },

import { mount, config } from '@vue/test-utils'
import ImageBlock from '@/components/blocks/ImageBlock.vue'
config.logModifiedComponents = false

describe('ImageBlock.vue', () => {
  test('renders correctly', () => {
    const wrapper = mount(ImageBlock, {
      propsData: {
        block: {
          id: '123',
          type: 'Image',
          payload: {
            src: 'https://github.com/potato4d.png'
          }
        },
        axiosConfig: {}
      },
      stubs: ['ShadowInput']
    })

import { mount, config } from '@vue/test-utils'
import RuleBlock from '@/components/blocks/RuleBlock.vue'
import * as BlockTypes from '@/types/Blocks'
config.logModifiedComponents = false

describe('RuleBlock.vue', () => {
  test('renders correctly', () => {
    const block: BlockTypes.RuleBlock = {
      id: '123',
      type: BlockTypes.BlockType.Rule
    }
    const wrapper = mount(RuleBlock, {
      propsData: {
        block
      },
      stubs: ['ShadowInput']
    })
    expect(wrapper).toMatchSnapshot()
  })

import { mount, config } from '@vue/test-utils'
import ParagraphBlock from '@/components/blocks/ParagraphBlock.vue'
import * as BlockTypes from '@/types/Blocks'
config.logModifiedComponents = false

describe('ParagraphBlock.vue', () => {
  test('renders correctly', () => {
    const block: BlockTypes.ParagraphBlock = {
      id: '123',
      type: BlockTypes.BlockType.Paragraph,
      payload: {
        body: 'foo'
      }
    }
    const wrapper = mount(ParagraphBlock, {
      propsData: {
        block
      }
    })
    expect(wrapper.element).toMatchSnapshot()

import { mount, config } from '@vue/test-utils'
import EditorBlock from '@/components/blocks/EditorBlock.vue'
import * as BlockTypes from '@/types/Blocks'
config.logModifiedComponents = false

describe('EditorBlock.vue', () => {
  test('renders correctly', () => {
    const block: BlockTypes.Block = {
      id: '123',
      type: BlockTypes.BlockType.Paragraph,
      payload: {
        body: '<p>foo</p>'
      }
    }
    const wrapper = mount(EditorBlock, {
      propsData: {
        block
      }
    })
    expect(wrapper.html()).toMatchSnapshot()

import { mount, config } from '@vue/test-utils'
import { BlockType } from '~/types/Blocks'
import { createBlock } from '~/utils/createBlock'
import AlisEditor from '../../src/AlisEditor.vue'
config.logModifiedComponents = false

describe('AlisEditor.vue', () => {
  test('can mount', () => {
    const initialState = [createBlock(BlockType.Paragraph, { id: '123Paragraph' })]
    const wrapper = mount(AlisEditor, {
      propsData: {
        initialState,
        config: {
          articleId: '12345',
          preview: '',
          iframelyApikey: '',
          axiosConfig: {
            headers: {
              authorization: ''
            }
          }

import Vue from 'vue'
import { config } from '@vue/test-utils'
import { install } from 'sinai'

Vue.config.productionTip = false
Vue.config.devtools = false

config.logModifiedComponents = false

Vue.use(install)

import chai from 'chai';
import chaiAsPromised from 'chai-as-promised';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';
import sinonStubPromise from 'sinon-stub-promise';
import { config } from '@vue/test-utils';

import './utils/axios';
import './utils/store';
import './utils/tid';

config.logModifiedComponents = false;

chai.use(sinonChai);
chai.use(chaiAsPromised);
sinonStubPromise(sinon);

beforeAll(async() => {
    testConfig.logModifiedComponents = false
    store.replaceState({
      ...store.state,
      route: { path: '/upload', query: {} },
    })
  })