skip to Main Content

Is it possible to remove/disable the html output that always spits out when running RTL tests?

My finger is getting sore from scrolling past the HTML output to find the start of the stack trace.

enter image description here

After scrolling and scrolling this is where I want to get to:

enter image description here

I still want to have the stack trace shown. That is more important to me than the HTML snippet. Unfortunately none of the approaches I have looked at worked because I still want to see the stack trace.

2

Answers


  1. The issue arises from RTL’s screen.debug() or prettyDOM calls that output the HTML structure of the components being tested

    I think You can mock the prettyDOM function or screen.debug() method to prevent them from outputting the HTML while preserving the stack trace.

    jest.mock('@testing-library/dom', () => {
      const originalModule = jest.requireActual('@testing-library/dom');
      return {
        ...originalModule,
        prettyDOM: () => '', 
      };
    });
    
    jest.spyOn(screen, 'debug').mockImplementation(() => {});
    

    This might help.

    Login or Signup to reply.
  2. You can use the configure method of testing library to change the error message thrown when get or find queries fail, as indicated in this issue.

    I’m assuming you are using jest. If that’s the case, you can add to your current jest setup a file that runs after the jest environment has been set:

    setupFilesAfterEnv: [
       "disable-rtl-dom-output.js"
    ],
    

    And it that file you can change the getElementError to something like:

    import { configure } from '@testing-library/dom';
    
    configure({
        getElementError(message, container) {
            const error = new Error(message);
            error.name = 'TestingLibraryElementError';
            return error;
        }
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search