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

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

it('should have icons, flags and images in selected options', () => {
    const wrapper = shallow(DropdownWithRequired, {
      propsData: {
        multiple: true,
        options: [
          {
            text: 'foo',
            value: 1,
            flag: 'cn',
            icon: 'question',
            image: {
              src: '/test',
            },
          },
        ],
      },
    });

it('should have content', () => {
    const header1 = shallow(Header, { propsData: { content: 'Content String' } });
    expect(header1.text()).to.equal('Content String');

    const header2 = shallow(Header, { slots: { default: '<span>Content String</span>' } });
    expect(header2.text()).to.equal('Content String');
  });
});

beforeEach(() => {
    wrapper = shallow(PickerDay, {
      propsData: {
        translation: en,
        allowedToShowView: () => true,
        selectedDate: new Date(2018, 2, 24),
        pageDate: new Date(2018, 1, 1)
      }
    })
  })

return new Promise(resolve => {
          process.nextTick(() => {
            resolve([{ title: 'title 1' }, { title: 'title 2' }])
          })
        })
      })
    }
    store = new Vuex.Store({
      modules: {
        blog: {
          namespaced: true,
          actions
        }
      }
    })
    wrapper = shallow(BlogComments, {
      localVue,
      store,
      propsData: {
        id: 1
      },
      stubs: {
        Loader
      },
      mocks: {
        $texts: {
          noComments: 'No comments'
        }
      }
    })
    h = new TestHelpers(wrapper, expect)
  })

it('is called', () => {
    const wrapper = shallow(BSwitch)

    expect(wrapper.name()).toBe('BSwitch')
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

it('is called', () => {
    const wrapper = shallow(BMessage)
    expect(wrapper.name()).toBe('BMessage')
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

it('render the placeholder and readonly attribute when passed', () => {
    const wrapper = shallow(BInput, {
      attrs: { placeholder: 'Awesome!', readonly: true },
    })
    const target = wrapper.find('input')

    expect(target.element.getAttribute('placeholder')).toBe('Awesome!')
    expect(target.element.getAttribute('readonly')).toBe('readonly')
  })

reactionable,
  ],
  methods: {
    myAction(payload, data) {
      this.myActionResult = {
        payload,
        data,
      };
    },
  },
  render(h) {
    return h('div');
  },
};

const wrapper = shallow(component, {
  localVue,
  propsData: {
    definition: {
      type: 'panel',
      _id: 'MyPanel',
      _reactions: [
        {
          component: 'MyTable',
          componentType: 'table',
          event: 'MyTableEvent',
          listener: 'MyTable.MyTableEvent',
          action: 'myAction',
          schema: [{
            name: 'field',
            mapName: 'mapField',
          }],

const initializeShallowWrapper: any = () => {
    wrapper = shallow(MShowMore);

    wrapper.vm.$i18n.translate = jest.fn((key: string) => key);
};