Intellij Debugger Console for Javascript imported objects or functions

I have a Jest file that I am debugging in Intellij.

import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';


    describe('<SamplePage />', () => {
      afterEach(() => {
        jest.clearAllMocks();
      });
    
      it('Correct text in SampleForm', () => {
        renderPage();
        expect(screen.getByRole('heading')).toHaveTextContent(
          "Text to check",
        );
      });
    });

Then I normally put a breakpoint at the expect() line so that the view has been rendered by then. Once at the breakpoint, I open the Debugger Console and I start playing with the test api by testing various statements. However I immediately get an error in the Debugger console when trying to call the screen.debug():

Although the autocomplete is working in the debugger for the screen:

The workaround that I have been using is to assign the imported object screen into a variable x for example. Then when I get to the breakpoint I can play with the x variable as the screen and call various methods like debug or getByRole.

However this is cumbersome since there could be multiple imported objects that I want to explore and assigning each of them to a temporary variable is just not scalable. Does anybody know how to fix this in Intellij?

Undefined variables (screen in your case) while evaluating code during debugging is caused by the weird way imported objects are transpiled + missing name mappings in sourcemaps: if the variable is renamed while transpiling/obfuscating, and no appropriate name mapping is provided, the debugger won't be able to match variable in source code with the one in VM.

There are some known issues when evaluating ES6 imports in modules transpiled by babel/built by webpack. Please see https://github.com/webpack/webpack/issues/3957, https://github.com/babel/babel/issues/1468 for details. There is unfortunately no way to fix the issue on the IDE end.