Posts tagged #testing

Lately, I've been realizing that co-located tests are better.

It's easier to see which components are tested or not, or quickly open a component's tests right there! --- as opposed to going to a different folder to crawl a hierarchy of test files.

mount vs shallowMount#

mount will render the whole component and all of its child components.
shallowMount will stub all the child component.

I think it's preferably to use mount and only stub the things that you need.

Stubs#

This is how you can stub sub components:

import { mount } from '@vue/test-utils'
import App from './App.vue'

test('mount component', () => {
  expect(App).toBeTruthy()

  const wrapper = mount(App, {
    global: {
      stubs: {
        MiniMap: true
      }
    }
  })

  expect(wrapper.text()).toContain('MiniMap')
  expect(wrapper.html()).toContain('<mini-map-stub')

  expect(wrapper.html()).toMatchSnapshot()
})