TypeError: Cannot read properties of undefined (reading 'toLowerCase') #73
Comments
|
@ewlsh |
|
@ewlsh |
|
Hi @dperini I still encounter this issue after upgrading to v2.2.3. Here is the reproducible test case, the issue is caused by the |
|
@jas-chen |
|
@jas-chen & @ewlsh Please copy the above code and paste it in the console and check if the results are correct. Thank you for the help with this. |
Yes, the issue is still there after upgrading to 2.2.4.
The result is not correct, Here is the code that I consider to be correct (note: the API of <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>customElements and nwsapi</title>
<script src="src/nwsapi.js"></script>
<script>
window.onload = () => {
class MyElement extends HTMLElement {
get element() {
return "hello";
}
render() {
return this.element;
}
}
customElements.define("my-element", MyElement);
const style = document.createElement("style");
style.innerHTML = `
body::before {
content: '';
}`;
document.head.appendChild(style);
document.body.innerHTML = '<my-element></my-element>';
const myElement = document.querySelector("my-element");
if (myElement.element !== "hello") {
throw new Error(`myElement.element should have value 'hello'`);
}
// should throw TypeError: Cannot read properties of undefined (reading 'toLowerCase')
console.log(window.getComputedStyle(myElement));
};
</script>
</head>
<body>
</body>
</html> |
|
@jas-chen & @ewlsh If you can setup a minimal native JavaScript/DOM code showing different behavior compared to that of "nwsapi", then I can dig further in the issue and try to fix my code else I should give up and only rely on your input. The scope of "nwsapi" is mimic and replicate the functionality of the native browsers qSA, in browsers and headless environments like "jsdom". Looking forward for a reproducible test case, without dependencies, showing the issue in "nwsapi". |
|
@jas-chen & @ewlsh with an extra check as suggested: ensuring first that this change doesn't affect other functionalities or produces other issues. |
|
@dperini I made another code that should produce the issue in the browser (tested with Chrome). <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/[email protected]/src/nwsapi.js"></script>
</head>
<body>
<script>
class MyElement extends HTMLElement {
get element() {
return "hello";
}
render() {
return this.element;
}
}
customElements.define("my-element", MyElement);
document.body.innerHTML = '<my-element></my-element>';
function match() {
return document.querySelector("my-element").matches('my-element::after');
}
// this works
console.log(match());
NW.Dom.install();
// throws `TypeError: Cannot read properties of undefined (reading 'toLowerCase')`
console.log(match());
</script>
</body>
</html> |
|
@dperini please correct me if I am wrong, but I don't see this issue fixed? |
Hi 👋 I'm working on upgrading our codebase from Jest 26 to Jest 29 and alongside that we're upping our
jsdomversion and thusnwsapi. I've been struggling with this very odd error in some components and eventually tracked it down to the codenwsapiis generating. What seems to be happening is whenever a component contains duet date picker*ByRoleselectors from React Testing Library start to fail. It seems to occur when jsdom evaluates a component within the duet date picker.It seems that with this code generated by
nwsapi,e.element&&e.type.toLowerCase()introduced heree.typeisundefinedfor these duet components and thus the generated code throws an error. I changed this to bee.element&&e.type&&e.type.toLowerCase()locally and my tests are now passing again.Duet does use custom web elements, but I'm not sure if that is relevant. Additionally it uses more complex selectors than most of our components, so could also be a factor.
The error:
Code generated before change:
Code generated after change:
The text was updated successfully, but these errors were encountered: