`screen.debug()` logs undefined in Output Inspector

[fvanwijk]

Not sure if this is a bug report or a feature request. I remember it worked as expected long time ago, but I can't remember exactly. (update: could be related to #165)

I'm trying to show the result of Testing Library's screen.debug() in the Output inspector.

screen.debug() returns undefined, so it makes sense that undefined is logged. However console.log is called internally so I still expect this to be in the Output explorer.

If I call console.log(prettyDOM()), it works as expected.

Maybe this happens because console.log calls are filtered by the files/tests lists? Is there a way to show console.logs for any file, just like when you run the tests from the terminal?

A second minor issue is that output is hard to read because of the logged color stops. Is it possible to apply those in the output?

Expected:

[smcenlly]

I remember it worked as expected long time ago, but I can't remember exactly.

Wallaby does some patching of testing-library at runtime to remove color highlighting, and to allow you to use Show Value and live comments after screen.debug();.

For some reason it looks like this isn't working for your project. It could be related to your testing framework, project dependencies, or perhaps something else.

Can you please provide your Wallaby Diagnostics report? It contains the information that we need to investigate further.

[smcenlly]

Bumping this issue in case you missed our reply.

[aweiss-dev]

I have the same problem while logging screen.debug().

My Diagnostics report can be found here: https://jsfiddle.net/drmshx9w/

[smcenlly]

Thanks for your diagnostics report. We have found/fixed the issue. Please update to Wallaby core v1.0.1335, it should work for you.

[fvanwijk]

@smcenlly I actually did not receive any GH notifications except for when you closed the issue :)

I have force updated the core to 1.0.1335 and I still get undefined as output when logging testing library using prettyDOM() or screen.debug().

This is the diag report for a test repo that I created for a different issue. https://jsfiddle.net/8tych3ur/

[smcenlly]

Your sample repo appears to be working for us when using the same version of VS Code, MacOS, node, and Wallaby.

We're wondering if there's some cached transform in vite / vitest for the previous version of Wallaby.

Could you please try cloning to a fresh directory to see if it works for you?

If it does work for you, please try using the Wallaby.js: Reset Wallaby Cache on your existing directory.

If you're still having problems, can you please let us know how you are installing your dependencies? We used npm install.

[smcenlly]

Closing this issue as we haven't heard back. If you're still having issues, please let us know and we will re-open the issue.

[fvanwijk]

There is definitely somethong wrong with GH email notifications because I didn't get any email from this thread again, despite the settings:

---

Anyway, the point is not that //? doesn't work with screen.debug() from Testing Library. When I try to log line 15 in Wallaby, I get the same output.

The issue is that I cannot log screen.debug() in the output inspector because it is calling console.log instead of returning it.

Here is another use case to illustrate what I mean: I'd like to logHello(); //? output hello and not undefined

[fvanwijk]

In hindsight I see that a duplicate was opened 2 weeks later: https://github.com/wallabyjs/public/issues/2510

I have core version v1.0.1379, so I would expect to see the component being logged

[smcenlly]

Anyway, the point is not that //? doesn't work with screen.debug() from Testing Library. When I try to log line 15 in Wallaby, I get the same output.

We have applied a fix for this that should address your issue, available in Wallaby core, v1.0.1380+. We apply a number of patches to testing-library so that screen.debug() will output inline, but this was not working when using vitest.

The issue is that I cannot log screen.debug() in the output inspector because it is calling console.log instead of returning it.

This is intentional. Do not expect Wallaby to output console.log inline for functions that return undefined; it may be intentional to log a function return value and we can't automatically patch all functions in this case. Our patch for screen.debug() does not have side-effects so it's safe for us to change the behavior.

In hindsight I see that a duplicate was opened 2 weeks later: https://github.com/wallabyjs/public/issues/2510

This issue was from 2020, almost 2 years before your issue was raised and was when we originally added support for screen.debug() to display inline.