32

Disclaimer: I am pretty new to Vue, JavaScript, and web frameworks in general.

I'm trying to familiarise myself with some basic unit and component tests using Jest and vue-test-utils.

I have read the docs on vue-test-utils' mount() and shallowMount() , but I'm not sure when to use the one over the other (they appear to be very similar).

According to the docs on shallowMount():

Like mount, it creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components.

What exactly is meant by "stubbed child components"? Can mount() and shallowMount() be used interchangeably?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
AnonymousAngelo
  • 996
  • 3
  • 15
  • 37

1 Answers1

53

What the documentation means by "stubbed child components" is that every components within the tested one will not be rendered. Instead, you will have a placeholder component.

This prevent your tests to be parasite by other component's behaviors.

In my opinion, you should always shallow mount your components when doing unit tests, and simply mount them when doing tests in your entire application.

Thomas Ferro
  • 2,362
  • 19
  • 32