Exploring Nested Divs with Vue Test Utils

Recently, I came across this shallowMounted vue component:

<div class="card p-relative">
  <div class="card-header">
    <div class="card-title h4">
      a lovely title
      <!---->
      <!---->
    </div>
  </div>
  <!---->
  <div class="card-body">
    <h3 class="circle" style="background-color: rgb(237, 15, 59);"></h3>
  </div>
  <div>
    <h6 class="card-body">Value: 35</h6>
  </div>
</div>

After doing a shallowMount like this:

const wrapper = shallowMount(Component, { proposData: { 'shape': 'circle'}})

I attempted to locate all the classes in order to find the class circle or the h3 element. But what I ended up with was:

const results = wrapper.classes()
console.log(results) // ['card', 'p-relative']

Can anyone advise on how to find the h3 element or the class 'circle'?

I am relatively new to frontend development and might be using some terminology incorrectly. Thank you for understanding.

Answer №1

In reference to the information provided on https://vue-test-utils.vuejs.org/api/selectors.html, it is mentioned that direct descendants can be accessed.

To achieve this, I proceeded as follows:

    const shape = wrapper.find('.card-body > h3')
    console.log(shape.classes()) //['circle']

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

Using Alpine JS to rotate through images at regular intervals using the window.setInterval() method

Attempting to tackle a simple task using Alpine JS and the standard JS function setInterval. The goal is to create an image selector where images switch every second (1000ms). Here's what I have so far: <div x-data="imgFunc()"> ...

When using the UI Router, nested views may display double slashes in the URL and redirect back to

I've been working on editing a project to incorporate a root view/state that encapsulates all other views/states within it. Previously, each page functioned as an independent state, making it cumbersome to implement global changes across all states wi ...

Text field suddenly loses focus upon entering a single character

In my current code, I have functions that determine whether to display a TextField or a Select component based on a JSON value being Text or Select. However, I am facing an issue where I can only enter one letter into the TextField before losing focus. Sub ...

methods for obtaining access in JavaScript when dealing with an ArrayList<Object> that has been converted to a JSONArray

I am dealing with an Object ArrayList that contains various variables, stored in an ArrayList of Objects. I then convert it to a JSONArray and pass it to a JSP page. How can I display these objects in a textarea on the JSP page using JavaScript? public cl ...

"Encountering a challenge when trying to populate a partial view using AngularJs and MVC

I am a beginner in AngularJS and I'm using a partial view for Create and Edit operations, but I'm encountering issues while trying to retrieve the data. The data is successfully being retrieved from my MVC controller but it's not populating ...

Utilize ng-click in conjunction with an AngularJS directive

I'm encountering an issue while trying to create a directive and attaching ng-click with the template. Despite my efforts, when clicking on the template, it fails to log the statement from the scope.scrollElem function. The directive has been success ...

Troubleshooting a problem with $addToSet and $each in Mongo and Node.js

I'm facing an issue while using $addToSet to add an array of Strings to a MongoDB database. The Object setup is defined as follows: var mongoose = require('mongoose'); var Schema = mongoose.Schema; module.exports = mongoose.model('Co ...

Creating a unique directive specifically designed to be used within an ng

I have a unique custom directive that I implemented in AngularJS. The directive is called within an ng-repeat loop, as shown below: The array of objects, selectedMealCalc.calculated_foods, is aliased as 'items' <!-- CUSTOM DIRECTIVE --&g ...

Steps to set up Feathers instance in Jest environment once

When running Jest tests, I want to utilize only one instance of feathers "app" throughout. This is how I currently import app in each test: const app = require('../../src/app'); describe(`service`, () => { it('registered the service&ap ...

Excel-like JSON Data Grid using jQuery

I am in need of a data grid similar to an Excel sheet. My primary focus is on filtering capabilities only (refer to the image below). Can anyone offer assistance with this? ...

The height of divs spontaneously changes after resizing without any instructions

I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...

Images fail to display on iOS devices using the Ionic Framework

I'm a beginner when it comes to the Ionic Framework, and I've encountered an issue with loading images. After receiving a list of image URLs from the server through a GET request, I can see the images' layout in Chrome's "Inspect eleme ...

Unable to bring in @material-ui/core/styles/MuiThemeProvider

I'm currently working on a React project that utilizes Material UI React components. My goal is to import MuiThemeProvider in src/index.js with the following code snippet: import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; . H ...

Issue: Unrecognized element type in next.js while starting development server

Every time I run npm run dev, I encounter the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from th ...

Sketchup's Vue.js integration allows for a seamless and intuitive interface

One interesting aspect of Sketchup is that it uses HTML for its extension user interface. Currently, I am working on creating an interface with Vue.js + Vuetify for Sketchup. While Sketchup can render the page successfully, I am facing difficulties in send ...

Validation error occurred while attempting to send form data to the Contact Form 7 API through Next.js

Having trouble sending data to the Contact Form 7 API and encountering an error while submitting the form: {into: "#", status: "validation_failed", message: "One or more fields have an error. Please check and try again.", post ...

The order in which JavaScript is being executed is being reversed

function checkForDuplicate(center, email) { $.ajax({ type: "POST", url: "../staff/staffDA.php", data: "funId=-4&center=" + center + "&email=" + email, success: function (data) { if (data.split('| ...

What is the benefit of using $q.all() with a single promise in AngularJS?

As I delve into this codebase, one snippet keeps popping up: $q.all([promise]).then(responseFunc); However, I find this confusing. After reading the documentation, I wonder why not simply use the following, as it's just a single promise... promise. ...

How to make a GET request to a Node server using Angular

I am currently running a node server on port 8000 app.get('/historical/:days' ,(req,res,next){..}) My question is how to send a request from an Angular app (running on port 4200) in the browser to this node server. Below is my attempt: makeReq ...

The processing time for this request is unreasonably long

My website is built using Laravel and Vue.js. I am facing an issue where a function takes more than 2 minutes to execute, resulting in the following error: 500 Internal Server Error Request Timeout This request takes too long to process and is timed out b ...