confirm that div contains the is-disabled class using the test-library on the screen

When attempting to use the screen feature from a test library in my unit tests for a component, I encountered an issue with verifying whether a button is disabled based on the JSX generated from the component. I attempted to use the toBeDisabled method but received the error message: 

Received element is not disabled:
ref: 

// test.ts
const button = screen.getByText('I am action Button')
expect(button.closest('div')).toBeDisabled();

// screen.debug()
<body>
  <div>
    <div class="menu is-disabled">
      <a class="bar-button">
        <span class="bar-label">
          I am action Button
        </span>
      </a>
    </div>
  </div>
</body>
javascripttypescriptunit-testingtesting

Answer №1

The toBeDisabled method is specifically designed for certain elements and does not work with the div element. In cases like this, you can try using toHaveClass instead.

To check if a div element has the 'is-disabled' class, you can use:
expect(button.closest('div')).toHaveClass('is-disabled');

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

Objects mentioned in references and virtual getters are not defined in pug layout file, but they were able to be retrieved from the database

I've encountered a two-fold problem that I believe may be stemming from my Schema definition and/or Model creation. While following this MDN Nodejs tutorial, I'm struggling with the following: My referenced objects are returning as undefined ...

javascriptnode.jsexpresspug

Ways to send an object to a Formik form

I have a function that takes a student as an argument function UpdateStudentDetails (student) { var firstName = student.firstName; console.log(student) return( <Formik initialValues={{studentId: student.studentId, firstName: f ...

javascriptreactjs

After utilizing a while loop with class objects, make sure to reset them afterwards

I am facing a dilemma due to Js referencing objects. Within my Js "class," I have created a new player with various variables, strings, arrays, and functions to check specific conditions related to those variables. As part of my code, I am running a whil ...

javascript

Retrieving property values from an object across multiple levels based on property name

I have a complex object structure that contains price information at various levels. My goal is to retrieve all values from the Price property, regardless of their nesting within the object. var o = { Id: 1, Price: 10, Attribute: { Id: ...

javascriptjqueryjsonlinqobject

The property "picture" of undefined cannot be accessed

My JSON data is structured as follows: { "error": false, "data": { "id": 1, "name": "Jagadesha NH", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de8f5ece0fde1e8cdeae0ece4e1a3eee2e0">[email  ...

javascriptjsonvuejs2

What methods are available for implementing hover effects within attributes using a JavaScript object?

const customPanelStyle = { 'background-color': 'red', 'border': '1px solid green', ':hover'{ 'background': 'blue' } } class some extends React.Component{ rende ...

javascriptcssreactjs

``I am experiencing an issue with the framework7 slider range feature not functioning properly on the

Issue with framework7 slider range not functioning in Google Chrome but working in other browsers. https://i.sstatic.net/ItY8U.jpg Here is the code snippet: <div class="item-content"> <div class="item-media"><i class="i ...

javascripthtmlcssgoogle-chromehtml-framework-7

What is the best way to handle form data for JSON manipulation in jQuery?

var checkedValues = $('.required:checked').map(function () { return this.value; }).get(); var arr = new Array(10); alert(checkedValues); alert("number of values in it " +checkedValu ...

javascriptjqueryjsonforms

What is the process for developing a personalized search feature in VueJS?

How can I create a custom search function in VueJS that allows me to input partial product names and receive relevant results? For example, I have 2 products named PlayStation Plus 90 Days IE and PlayStation Plus 90 Days NO. Currently, I have to input the ...

javascriptvue.jsvuejs2vue-component

Tips for adjusting the timing of an interval in Angular and RxJS to create dynamic changes

I am looking to dynamically adjust the delay of an interval, but my knowledge of Angular is limited which is hindering my progress in this task. Below is the current code snippet I am working with: timeDiffs : number[] = [] <== this array contains time ...

angulartypescriptrxjsintervalssubscribe

Error: Laravel mix compilation - unable to locate class

After upgrading from Laravel 5.3 to 5.4, I am currently in the process of transitioning to webpack. Although it compiles without errors, whenever I try to load the page, I always encounter: app.a711192….js:125 Uncaught ReferenceError: Layout is not def ...

javascriptlaravelnpmlaravel-mix

Custom Joi middleware in Express v4 is failing to pass the Request, Response, and Next objects

I am currently in the process of developing a unique middleware function to work with Joi that will be placed on my routes for validating a Joi schema. In the past, I have created middlewares for JWT validation without passing any parameters, and they wor ...

javascripttypescriptexpressjoi

Strategies for managing extensive data collections during server-side simulation to enhance performance on client browsers

Apologies for the unclear title. I am facing a bit of confusion with my current project. I am in the process of developing a web front-end for an academic simulation tool, which includes a C++-based simulator that is efficient for small systems but produce ...

javascriptphpajaxweb-applicationsdataset

Encountered an issue with accessing the property 'path' of undefined in nodejs

Below is my server side code snippet: var fs = require('fs'), MongoClient = require('mongodb').MongoClient, db; var url = "mongodb://localhost:27017/fullwardrobedb"; MongoClient.connect(url, {native_parser: true}, function (err, connec ...

javascriptnode.jsfilecurl

Discover similar items within an array by utilizing async/await and promise.all

The value of filterdList.length always equals the total number of elements with the code provided below. As a result, this method consistently returns false because there is only one item in the table that matches the given name. async itemExists(name) : ...

javascripttypescriptasync-awaitprotractor

Using three.js to maintain an object's position on top of another object's surface

I have created a terrain geometry using this JavaScript code: var geometry = new THREE.PlaneGeometry(100, 100, 100 , 100 ); for (var i = 0, l = geometry.vertices.length; i < l; i++) { geometry.vertices[i].z = Math.random() / 2; ...

javascriptthree.js

Tips for determining if an array of objects, into which I am adding objects, contains a particular key value present in a different array of objects

I've been working on this and here is what I have tried so far: groceryList = []; ngOnInit() { this._recipesSub = this.recipesService.recipes.subscribe((receivedData) => { this.loadedRecipes = receivedData.recipes; }); } onCheckRecipe(e) { ...

javascriptarraysangulartypescriptobject

Simply touch this element on Android to activate

Currently utilizing the following code: <a href="http://www...." onmouseover="this.click()">Link</a> It is evident that this code does not work with the Android Browser. What javascript code will function properly with the Android Browser as ...

javascriptandroidclickonmouseover

The invalid token error for Jquery Ajax jsonp occurs when the JSON data is invalid, even though it initially

Currently, I am experimenting with using the OSRS API in jQuery. Prior to this, I have utilized it with httparty in Rails but now, I wanted to explore a Javascript approach. However, I am encountering an issue with parsing the content of the response des ...

javascriptjqueryjsonajax

Tips for using the $each() function within a jquery append to retrieve object-based conditions for parameters

I encountered an issue while trying to include a condition in my endpoint, and I have recently started using jQuery for this purpose. Here is the code snippet from my Laravel view: <tbody id="tbody"> @foreach ($modul as $m) <tr> ...

javascriptjqueryajaxlaravel