What sets apart Vue-Test-Utils' "mount" from "shallowMount"?

Just to clarify, my experience with Vue, JavaScript, and web frameworks is still pretty fresh.

Currently, I am working on getting more familiar with basic unit and component testing using Jest and vue-test-utils.

I have gone through the documentation for vue-test-utils' mount() and shallowMount() , but I find it challenging to figure out when to use one over the other since they seem very similar.

As per the explanation of shallowMount() in the docs:

Similar to mount, it creates a Wrapper that holds the rendered Vue component, but includes placeholder child components.

What exactly does "placeholder child components" mean? And can mount() and shallowMount() be used interchangeably?

Answer №1

The concept of "stubbed child components" in the documentation refers to the practice of not rendering every component within the tested one, but instead using a placeholder component.

This approach helps prevent your tests from being affected by other components' behaviors.

In my view, it is advisable to shallow mount your components for unit tests, and only fully mount them when testing your entire application.

Answer №2

While Thomas Ferro makes some valid points about the function of these components, I have a different perspective on the preferred method to use. In my view, it is always best to utilize mount over shallowMount.

To support my argument, I would like to reference an article written by Martin Fowler:

There are two distinct approaches to TDD: mockist and classical TDD. When everything is mocked in your test, there is a high level of dependency knowledge within the test itself. This means that when a method from a child component or dependency is called, the test is aware of it.

In classical TDD, the recommendation is to only mock the Boundary layer (which includes web calls, filesystem calls, database calls, and view calls), and nothing else. Therefore, the term "unit" or System Under Test does not necessarily refer to a single object but rather a group of objects.

This distinction leads to the advantage of classical TDD, where changes in method names do not affect the test outcomes. In contrast, mockist style tests may fail if method names are altered. The essence of classical TDD lies in focusing solely on input-output verification while disregarding intermediate details.

By treating the test as if the dependency does not exist (except in the constructor), classical TDD allows for seamless refactoring and code transformation without impacting test results. This approach ensures that tests continue to pass even if methods in dependencies are modified.

Exceptions to this rule include web calls, repository calls (such as database or file system interactions), and view calls. Aside from these scenarios, classical TDD emphasizes the validation of inputs, outputs, and states rather than dependencies.

Therefore, transitioning a child component to the main component or another child component should not disrupt test outcomes when following classical TDD principles. Ultimately, classical TDD enables developers to refactor with confidence and maintain test integrity through its focus on input-output verification.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the secrets to activating Next.js's 12-factor application bundling capabilities!

Exploring the Next.js documentation on environment variables - To ensure the security of server-only secrets, Next.js substitutes process.env.* with the correct values during build time. Does this imply that only the environment variables set at build t ...

Error: The absence of an element identified by the locator does not cause the protractor spec to fail, but rather it executes successfully

This automation framework follows the page object model and utilizes the async/await approach rather than promises. TypeScript is used, with compilation to JavaScript (protractor) for script execution. Page Object: async addProjectDetails(): Promise< ...

Does a Javascript event get triggered when the currentSrc attribute of an <img> element is modified?

Let's imagine we have an image tag like this: <img id="my_tag" src="/default.jpg" srcset="/small.jpg 500w, /medium.jpg 1000w, /large.jpg 2000w"> Upon loading the page, JavaScript can determine which source from t ...

What is the best way to manage a multi-select dropdown with checkboxes in Selenium Webdriver?

Below is a snapshot of the drop-down I am working with. In order to handle multiple selections, I currently have code that clicks on the arrow in the drop-down and then selects the corresponding checkbox. However, I would like a more efficient solution fo ...

Adjusting canvas size to match content dimensions

I posed a similar inquiry and it was categorized as a duplicate even though the suggested duplicate did not provide an answer to my question. Edit: The purported duplicate was [stackoverflow.com/questions/17211920/make-canvas-height-auto][1] I am utilizi ...

The function $http.get in AngularJS is providing an undefined response

In the process of developing a small Angular application, I started with this seed project: https://github.com/angular/angular-seed. The only modifications I made were to the following files: /app/view1/view1.js 'use strict'; angular.mod ...

The global class variable encounters an error when trying to assign the value of "socket" to it

Within my class constructor, I am setting up a Socket connection and then storing the socket parameter in a global class variable (this.socket_variable = socket) so that I can access it across all functions in the class. CODE const { Server } = require(&q ...

What is causing the 'transitionend' event to trigger multiple times?

Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...

Upon refreshing the page, next.js 13's useSession() function fails to fetch session information

Currently, I am working on replicating an ecommerce site using nextjs 13. On the order page, I am utilizing useSession from next-auth/react to check if a user is signed in or not. Everything works fine when I navigate to the page through a link, but if I r ...

Angular Material's md-checkbox is a required component

I am working on a form that consists of checkboxes representing the days of the week. When the user hits submit without selecting any checkboxes, I want an error message to appear. Here is the HTML code snippet that I have: <form id="addEditForm" nam ...

I need help figuring out how to create dynamic bars that change colors based on their values. Any suggestions on how to

Seeking a solution to create interactive live-charts similar to the image provided. I've explored various chart libraries like Highcharts, fusioncharts, raphaeljs and many others, but haven't found one that fits my needs perfectly. I experimented ...

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

Vue3-compatible UML diagram collections

Looking for suggestions on UML diagram libraries that are compatible with Vue 3. Any recommendations? Thank you! ...

What is the proper way to change this JavaScript variable into JSON format?

I have a JavaScript variable containing data that I need to convert into valid JSON format for easier parsing. The current variable structure is as follows: { "machines": [{ "category": "Category 1", "items": [{ "name": "Te ...

Issue: ParserError encountered due to a Syntax Error found at line 1, column 32

As a beginner in programming, I am encountering an issue. When I run "npm run build" in the Terminal to compress my project in React.js, I encounter this error. Interestingly, I have previously created another project without facing this problem, and I can ...

What is the best way to implement asynchronous guarding for users?

Seeking assistance with implementing async route guard. I have a service that handles user authentication: @Injectable() export class GlobalVarsService { private isAgreeOk = new BehaviorSubject(false); constructor() { }; getAgreeState(): Obser ...

Recommendations for Configuring VPS for Angular2 and .Net Application

My team and I are currently in the process of developing an application that combines Angular2 for the front-end and Web API ASP.NET for the back-end. We are currently at the stage of configuring a VPS for this application but unfortunately, we lack the ...

Persistent Angular Factory Variables Showing Outdated Data - Instances Stuck with Old Values

One of the challenges I faced was setting up a resource factory to build objects for accessing our API. The base part of the URL needed to be determined using an environment variable, which would include 'account/id' path segments when the admin ...

Challenge with neglected open connections from a comet

Utilizing various comet techniques like long polling and forever frame, along with iframes for cross subdomain activities, has presented a challenge during implementation. When a user refreshes the page or navigates to another page, a new request is made w ...

Issue with Material-UI DataGrid Component: Unable to access property 'length' as it is undefined

I need to display my JavaScript Object Data in a table format with pagination and sorting capabilities. I have chosen the DataGrid component from Material UI, but I am encountering some errors. Below is the code snippet: import React from 'react&apos ...