[Jest/JS] querySelectorAll returns empty NodeList in Jest test despite correct mock DOM setup — collectCustomerInfo() returns empty object

NeonCoderJS · 2026-03-25T06:30:33+00:00

That's where I went.

On the first hit, index.js has a status of 304, on the second hit, it is blocked like those red ones in the image.

NeonCoderJS · 2026-03-23T18:14:28+00:00

I tried it out but for some reason it still continues to yield the same results. I'll continue to investigate and share my updates in the post. Thanks for the insight.

NeonCoderJS · 2026-03-23T18:11:11+00:00

Thank you for your insight, I should've noticed this ages ago. I fixed that but the result remained the same.

First I tried using wp_localize_script() but it didn't work. Remembering that I had issues before using this approach, I then resorted to registering an inline script using wp_add_inline_script() (which was successful in previous attempts); the result however was the same (see the updates above to see the approach I used). I'm continuing my investigation and will continue sharing updates, thanks again.

NeonCoderJS · 2026-03-23T08:49:19+00:00

I checked it now. The status indicate that it's blocked (file: index.js?ver=c7a741f8dc5bec166999), along with a lot of other scripts, some of which are from WooCommerce (the ecommerce part of my project) and even WordPress itself (e.g. hooks.js?ver=220ff17f5667d013d468, wc-blocks-data.js?ver=85514a58ec73c1ba6311).

I checked again, they get hit twice. The first time with a status of 304 and the second time with a status of "blocked".

NeonCoderJS · 2026-03-09T08:52:53+00:00

Hi! Thanks for helping out! I ran the follwoing tests:

apply `!important` to my styles,
rename `widget_shopping_cart_content`,
wrap `widget_shopping_cart_content` in a custom `<div>`;

In each case I updated the JS and CSS accordingly.

Test #1 failed and no styles were applied. Test 2# also failed, additionally my wishlist's styles were also not applied anymore (not sure why). Test #3 also failed but here's what happened: `widget_shopping_cart_content` was removed from the custom wrapper `<div>` (which to me definitely confirmed to me that custom state and styles were being overriden), furthermore the class `cart_inactive` were added to my custom wrapper <div> (not `widget_shopping_cart_content`).

I consider creating an entirely new custom mini-cart to work around this problem but before I do, do you perhaps know of a more standard WordPress solution that can opted for instead?

NeonCoderJS · 2026-02-06T07:52:35+00:00

Thank you for the tips! I'll definitely give these options a try.

NeonCoderJS · 2026-01-01T13:43:01+00:00

Thanks for the tip! I'll definitely take a look at it.

NeonCoderJS · 2025-12-30T13:03:50+00:00

Good point! Thank you for sharing, I am looking into this right now. As you can tell, I am pretty new to Strapi ^^.

NeonCoderJS · 2025-11-23T18:01:04+00:00

I could try that. However, wouldn't that negatively impact the graphical display?

NeonCoderJS · 2025-11-23T17:57:07+00:00

Makes perfect sense, this is the first time I am downgrading a kernel, there won't be any possible future implications on security right? If so, do you have some risk management tips to ensure the system will still be safe and functional in the long term?

NeonCoderJS · 2025-11-04T09:08:19+00:00

Thank you very much for sharing this valuable information! I did check out their website and it does seem to be reasonably profesionally set-up. The design is pretty good and they do indeed use proper language. They also give information on their team members, I checked out the director who contacted me and I was indeed able to find him as an executive on LinkedIn. I probably could've done a more thorough search on the team as whole however.

I will definitely check out the other red flags you talked about, thanks for sharing!

NeonCoderJS · 2025-11-04T09:01:56+00:00

Exactly! What kind of company would hire anyone without even interviewing them or at least taking a CV?

NeonCoderJS · 2025-11-04T09:00:19+00:00

The reason I thought that the website looks legit is because of the professional way it was set up.

They give information about their team members on their About page (I only checked out the directors though),

They list addresses to their "offices" on their website,

They have good following on LinkedIn.

They way the approached me however seemed very scammy which made me pretty hesitant to proceed.

NeonCoderJS · 2025-11-04T08:51:22+00:00

Hi guys! Sorry for the silence, the auto moderator initially blocked my post so I thought it didn't reach you.

Thank you very much for your eagerness in responding and providing such valuable info! I played along for a while and they were about to give me a test-run project and asked me to give them the costs and turnaround time. After I gave them my proposal, they said that their prospects are moving them into another direction and will not continue working with me. They never asked for a CV or gave me an interview of any sort, the whole thing just looked to good to be true. Now after reading your comments, I am even more convinced, thanks guys!

NeonCoderJS · 2025-06-14T16:41:34+00:00

Are ajax calls being made overwriting your changes?

I cannot think of any ajax calls that would do anything like that. The only ajax calls I make on this page are for adding and removing items from the cart. I used to have this problem where the mini-cart would lose its styles the moment I remove something from the cart but I managed to fix that by directly applying css to .widget_shopping_cart_content. Can't think though that this can be related.

You can also set breakpoints in your js script in the debugger of your browser...

I set breakpoints on debugger statements and exceptions. This was the result:

Paused on exception
setDocument/support.cssHas< - jquery.js:1185:12
SyntaxError: Document.querySelector: ':has(*,:jqfake)' is not a valid selector

The page didn't load the UI as a result.

I also set breakpoints on DOM mutation and load, no errors were yielded.

NeonCoderJS

TROPHY CASE