HTML custom attribute not showing?

Question

Using a React app, i am currently addind custom attributes to HTML tags or React components for E2E tests (Testcafe)

I am not sure why the extra data-test="burger-menu-btn" is not showing up in any Element when i inspect the page ?

 import {slide as Menu} from 'react-burger-menu';
 ...

 <Menu className="sidebar-menu" isOpen={menuOpen} data-test="burger-menu-btn">
        <Nav.Link onClick={() => goTo("/dashboard")}>
        ...
 </Menu>

Its also the case for regular HTML tags such as

<button className={"redirect-button"} data-test="return-dashboard-btn">Return</button>

Thus testcafe is not able to find the button with await Selector('[data-test="return-dashboard-btn"]');

The app is served either through webpack-dev-server or a webpack bundle

I don't think webpack removes any HTML attributes, not sure why they are gone.

Answer 1

Usually, when you use components, custom attributes may not appear because they are props and they might have not been used in the component. In your case, the <Menu ...> is the component, and usually, the attributes that you pass are its props. You need to open Menu and then see if you can modify it. I wouldn't recommend it having in mind it's part of your component.

As far as I know, Menu doesn't accept custom properties. You need to make one of your own which allows custom props. Best thing is, copy the Menu.js and name it MenuExtended, allow the custom prop as a property of the component.

Answer 2

So in react-burger-menu, in the <Menu/> Component, there are no custom props as you can see here in their repository. Try creating your own component or use a <button>