Intellij Debugger Console for Javascript imported objects or functions

Question

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?

The code provided doesn't throw that error, unless it's hidden inside renderPage()? — evolutionxbox
– evolutionxbox, Commented Mar 17, 2021 at 1:02
no it is not the code that throws it, its the debugger console when I get to the breakpoint on the expect() line, I use the debugger console to execute statements like screen.debug() — Carlos Jaime C. De Leon
– Carlos Jaime C. De Leon, Commented Mar 17, 2021 at 2:12
expect(screen.getByRole('heading')).toHaveTextContent("Text to check"); doesn't call screen.debug — evolutionxbox
– evolutionxbox, Commented Mar 17, 2021 at 10:19
@evolutionxbox no it does not, I manually call it in the Debugger Console; the issue is not in the code itself but in the Debugger Console where you can type in any JS statements to execute. For some reason the Debugger Console cannot resolve screen or any objects imported — Carlos Jaime C. De Leon
– Carlos Jaime C. De Leon, Commented Mar 18, 2021 at 0:50

lena · Accepted Answer · 2021-03-17 10:54:11Z

1

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.

answered Mar 17, 2021 at 10:54

lena

94.4k11 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Jaime C. De Leon Over a year ago

thanks for the links, will have a read on them

Collectives™ on Stack Overflow

Intellij Debugger Console for Javascript imported objects or functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related