react-testing-libraryangular-testing-library

Stop huge error output from testing-library


I love testing-library, have used it a lot in a React project, and I'm trying to use it in an Angular project now - but I've always struggled with the enormous error output, including the HTML text of the render. Not only is this not usually helpful (I couldn't find an element, here's the HTML where it isn't); but it gets truncated, often before the interesting line if you're running in debug mode.

I simply added it as a library alongside the standard Angular Karma+Jasmine setup.

I'm sure you could say the components I'm testing are too large if the HTML output causes my console window to spool for ages, but I have a lot of integration tests in Protractor, and they are SO SLOW :(.


Solution

  • I would say the best solution would be to use the configure method and pass a custom function for getElementError which does what you want.

    You can read about configuration here: https://testing-library.com/docs/dom-testing-library/api-configuration

    An example of this might look like:

    configure({
      getElementError: (message: string, container) => {
        const error = new Error(message);
        error.name = 'TestingLibraryElementError';
        error.stack = null;
        return error;
      },
    });
    

    You can then put this in any single test file or use Jest's setupFiles or setupFilesAfterEnv config options to have it run globally.