We Keep Coding

byRole is not returning the DOM element

I am migrating some of my unit test cases which were previously written using Jest and Enzyme to React Testing Library. I am using Material UI's Select component and I know that, in order to open the dropdown, we have to trigger the mouseDown event on the corresponding div. Here is how I did it in Enzyme (working):
wrapper.find('[role="button"]').simulate('mousedown', { button: 0 });
I am trying to achieve the same using React Testing Library in the following manner, which is not working:
const { container, getAllByRole, getByRole } = renderComponent(mockProps);
fireEvent.mouseDown(getByRole('button')); // trigger the mouseDown on div having role=button
After this I am trying to access the listbox element which is ul element:
getByRole('listbox')
which throws an error and says:
TestingLibraryElementError: Unable to find an accessible element with the role "listbox"
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
I have verified and the ul element is visible (neither it nor its parent have display none or visibility hidden)
UPDATE - 1
I have tried all the following approach to wait for element to appear in DOM:
waitFor
findByRole instead of getByRole
in both the case it throws error that
Unable to find role="listbox"
What is wrong?

If the element is not accessible at the first render this error could appear, you can try passing the option hidden to the options key in the second argument of the getByRole, if this not works you can try using findByRole, that method wait for the element, and if you want to be sure of the visibility of the element you can try adding a waitFor inside of the test.
getByRole('listbox', { options: { hidden: true } });

Make sure animations are not compromising your results. If the animations change opacity or display and they did not finish before assertion from jest... it is likely to throw an error.

I found the root cause of this issue. I am using the Select component from MUI in disablePortal mode, which make the menu list to be rendered inside the parent component instead of document body. But while MUI does that, it doesn't remove the aria-hidden attribute from the parent component's div, and because of that testing library is not able to locate the listbox (ul) element inside.
There is an issue reported here:
https://github.com/mui/material-ui/issues/19450
So as a work around, I passed the data-testid to the menu component (MenuListProps) and using it to get the listbox.

Javascript : How to make a element clickable that was created in a function

Hey I have a problem that I don't know how to solved.
To make simple. I have a script that create element based on what I have get from a server.
At moment I create an image with the id "add"
And I want when we click on this image to trigger a function so I did a little script
document.getElementById('add').onclick = function(){
alert('ADD !'); // <- For the test
}
But I get a problem when Uncaught TypeError: document.getElementById(...) is null. I thing this because I create this element in the other function and he is not directly in the html code. But I don't know how to solve that.

You have to append the element to the document:
document.appendChild(yourElement);
Then you have to add an EventListener to your object:
document.getElementById('add').addEventListener("click",
function() {
alert('test');
});

i think your example is not long enought to answer you properly but to do want you want, you need to create your element, then attach your event to the element. I'm pretty sure you are trying to set the event on a element that doesn't already exist in DOM

React.js: Getting "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

I have a <span> element that is inside of a contentEditable <div>. In certain situations, when I try to delete everything in the <div> at once with Command-Delete, or when I try to delete individual characters from the <span> element when it is the only thing inside of the <div>, I get the error in the title.
How can I go about fixing this?
I put together a sandbox example of the issue:
https://codesandbox.io/s/nostalgic-wildflower-52eul?file=/src/App.js
It throws the error under two circumstances (the keyword in the example is test, it should get highlighted in blue when you type it):
Type any string with test inside of it or just test and highlight everything and delete.
Type any string with test inside of it, delete everything else except for test, then delete any character in test.
Thanks for any help!

You most probably read the following error when you set contentEditable of your div to true:
Warning: A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.
The problem here is that you let React add a child node to the content editable div and remove it through the actual DOM when interacting with it and removing all of its content.
React tries to re-render, and remove the span that should not be existent on next render however, you already removed it through your keyboard input.
You should only suppress the warning if you're absolutely sure about what you're doing, as it is warning you about the exact error you're getting.
The solution you're going for will not work as you would like it to.
You could be better off trying to implement an edit mode and highlighting the words after the user saves the content. This is only an idea as I don't know exactly what you're trying to achieve.
More info on this: https://stackoverflow.com/a/49639256/7381466

Just give the key to the parent element i.e div className='app ' according to your code or add a new parent element and just give the key to that element.
and if anything changes and you get this error, just update the key of the parent element 
Because updating that parent element key causes react to detach the parent element from its dom, you can avoid this error because the problem is with the child element.
In onInput just check if the elemeent with id="addItemInput" is present or not and if it is not there just update the parent element key

Underscore/jQuery - combine hasClass and map

In my web page, I have a list of div and depending on the scroll position, one of them has a class 'active'.
I'd like to change the css of the class set to active.
Rather than looping through all the divs, I wanted to use the underscore library but I am not sure I am using it correctly with jQuery:
_.map($('.item'), function(item){
if (item.hasClass('active'))
// some code here
});
When I run this code, I get the following error:
Uncaught TypeError: undefined is not a function
I assume my browser doesnt recognize 'item' as a jQuery object.
How can I fix this?
thanks

How to click and navigate on a new page programatically using javascript

I want to click on link on a page and navigate to a new page. I used following code for it :
document.getElementsByClassName('classname').click();
I used classname as it dont have id. document.getElementsByClassName('classname') works fine. But use of click() returns :
TypeError: document.getElementsByClassName(...).click is not a function
Why I am getting this error? I read in couple of answers in stackoverflow that click() works fine. I am using this code in firebug console of firefox.
If click() won't work, what other options I have?

document.getElementsByClassName returns an array of elements, so you have to specify the index:
document.getElementsByClassName('classname')[0].click();
As a side note, programatically clicking an element doesn't run the native behavior, it runs the assigned click handlers for said element.

Use
document.getElementsByClassName('classname')[0].click();
Returns a set of elements which have all the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName on any element; it will return only elements which are descendants of the specified root element with the given class names.
Reference