Menu
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?
678
shallowMount() Like mount , it creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components.
1. Component Testing with Vue Test Utils & Jest. Jest is a well-liked JavaScript testing framework that comes packed with many goodies for developers focusing on simplicity. It's one of the fastest testing frameworks for Vue single-file components.
The plugin pulls all required dependencies (including jest), creates a jest. config. js file with sensible defaults, and generates a sample test suite. After that, all you need to do is to install Vue Test Utils.
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.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
