What is the procedure for verifying the type of an element using chai?

Is there a way to determine if an element is either an "a" tag or a "div" tag? I've tried the following code, but it's not working as expected:

it('has no link if required', () => {
        const wrapper = shallow(<AssetOverlay asset={ assetsData[0] } shouldBeLinked />);
        expect(wrapper.find('.overlay-asset-link')).to.be.a('a');

        const wrapper1 = shallow(<AssetOverlay asset={ assetsData[0] } shouldBeLinked="false" />);
        //expect(wrapper1.find('.overlay-asset-link')).to.be.a('div');
    });

Answer №1

This is because chais type checking specifically looks at javascript types, not HTML tags.

If wrapper.find() returns a standard HTML element, you can test it using:

expect(wrapper.find('.overlay-asset-link').tagName).to.equal('A');

Please note: The tag name property is always in uppercase.

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

Utilizing ReactJS for Seamless API Calls on the Server Side

Having an issue with CORS blocking my very simple API axios.get request in ReactJS on the client side. No data is being returned because of this restriction. I've realized that I need to move this request server-side, but I'm unsure about how to ...

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

Unexpected data displayed in React list after item deletion issue

I am currently working with a basic list of student objects that include their names and scores in the state. The name is displayed using <b>{student.name}</b>, while the score is displayed using <input type="text" defaultValue={s ...

Tips for retrieving modified data from a smart table in Angular 4

Currently, I am working on an angular project where I am utilizing smart table. Here is a snippet of my .html file: <ng2-smart-table [settings]="settings" [source]="source" (editConfirm)="onSaveConfirm($event)" (deleteConfirm)="onDeleteConfirm($event ...

Tips for passing a distinct identifier to the following page when transitioning with Link in NextJS

I need to pass an identifier to the next page when a user navigates. On my homepage, I am fetching an array of data and using the map method to display it in a card-based UI. When a user clicks on a card, they should be taken to another page that display ...

Struggling to connect with PouchDB within my HTML-based Web application

I am looking to integrate pouchDB into my WebApp so that upon clicking a button, the data from a JSON file will be saved to pouchDB. In the initial stage in my index.html, I included the following: <script type="module" src="pouchdb/packa ...

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

What's the issue with incorporating React JS components into Django templates via static files (hybrid model)? (beginner question about JS/React)

I'm still getting the hang of JS/React/npm/webpack and I'm relatively new to Django as well. My goal is to enhance the search experience (frontend) for my current Django web application, and I've decided to utilize elastic/search-ui componen ...

Ways to retrieve the identifier of a specific element within an array

After successfully retrieving an array of items from my database using PHP as the backend language, I managed to display them correctly in my Ionic view. However, when I attempted to log the id of each item in order to use it for other tasks, it consistent ...

Execute JavaScript function after completion of CSS animation using jQuery

I'm working on an accordion feature that uses CSS animation to expand the clicked item. The expansion is triggered by li:target. However, I'm facing an issue where when clicking on an item, the scroll position doesn't align correctly with t ...

JavaScript - The progression of a virtual pet even when the user is offline

Currently, I am utilizing VueJS and MongoDB to develop an interactive virtual pet. Our approach involves storing user data in localStorage for easy access and retrieval. I'm exploring the concept of allowing the virtual pet to evolve autonomously (s ...

How can I position a Button at the center of my Grid item using Material UI?

In my React 16.13.0 application, I am utilizing Material UI's Grid and trying to center the content of a button in the middle of a row. Here is what I have tried: center: { alignItems: "center", width: "100%", }, halfRow: { width: "5 ...

Is there a way to insert and store a personalized field in the WordPress Gutenberg (block editor) dashboard?

https://i.stack.imgur.com/FZvts.png I'm currently working on my portfolio and am looking to include a gallery field. I couldn't figure out how to add a custom field in the screenshot provided. Does anyone have any insights on how this can be ach ...

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

Looking to enhance MUI DataGrid's functionality by adding custom event listeners like rowDragStart or rowDragOver? Unfortunately, DataGrid doesn't have predefined props for these specific events. To learn more, check out the official documentati ...

Discovering the value of an object through its prototypes

Is it possible to create a function that can locate the value "5" within an object's prototype? What is the proper algorithm to achieve this? var rex = { "Name": "rex", "Age": 16, } te = { "to": 5, } rex.te = Object.create(te); function findValu ...

Error in Discord.JS: The function message.author.hasPermission is not recognized

As I was working on creating a new command for my discord.js bot to toggle commands on/off, I ran into some issues. Specifically, when I attempted to use the .hasPermission function, I encountered the following error message: TypeError: message.author.ha ...

Having trouble creating an axios instance in Vue

I recently came across a helpful tip in an article about using axios for AJAX requests in Vue. The author mentioned that by setting Vue.prototype.$http = axios, we can then use this.$http within the Vue instance, which worked perfectly for me. However, wh ...

Repairing a syntax error in a jQuery selector variable

$(".className").click(function(){ var link = $(this).find("a").attr('href'); //output is '#myID' var findItems = $(link '.mydiv').length; //WRONG var findItems = $(link + '.mydiv').length; ...

What is the best way to traverse through a nested JSON file with d3.js?

Greetings. I am currently facing a challenge in navigating through a nested JSON file. Below is the JSON data that I need assistance with: {"Id":466,"Name":"korea", "Occurrences": ...

Error encountered while attempting to install material-ui v3.0.3 due to an unexpected termination of the JSON input

I'm currently in the process of installing the most recent stable version of material-ui(v3.03) by running: npm install @material-ui/core. However, I encountered an issue with npm ERR! Unexpected end of JSON input while parsing near '...-/brcast- ...