Stop HTML DOM output on test error

[IanGrainger]

Describe the feature you'd like:

Please can we have a way to stop outputting the HTML of the DOM when there's an error? I can't think of a single time I've found this helpful, and outputting 9000 characters for every failed test means I can't read the output in the console window in any sensible way.

This one issue has put off work mates from wanting to use this library! And the library is super awesome!

I'm not sure if testing-library can read my Jasmine conf? But it'd ideally not be an environment variable, because its tricky to get the Karma runner to read them :(

Describe alternatives you've considered:

I've tried setting the PrettyDOM limit to 0 using the env variable - but a) that means I can't then manually run debug(el) to see some actually useful HTML and b) it doesn't work with Karma (I'm using testing-library with Karma in an Angular project, which I realise is pretty unusual - but I love it too much!!).

[wyze]

Looks like you may be able to set the getElementError config option to something else.

dom-testing-library/src/config.js

Lines 26 to 33 in 01e243b

	// called when getBy* queries fail. (message, container) => Error
	getElementError(message, container) {
	const error = new Error(
	[message, prettyDOM(container)].filter(Boolean).join('\n\n'),
	)
	error.name = 'TestingLibraryElementError'
	return error
	},

[IanGrainger]

Thats awesome! I hadn't seen that, thank you @wyze !

And I can get rid of the callstack, too, with error.callstack = null; Amazing 👍

[IanGrainger]

@wyze do let me know if you want the credit over on Stack Overflow (https://stackoverflow.com/questions/64045789) - I'll use your answer there for now 👍

[wyze]

Didn't know it was also on SO, so I answered there as well. Thanks @IanGrainger!

[RobRukavina]

The solution above did not work for me. I've tried some variations of it as well including not passing a container at all to my new Error(message). I've set error.stack = null, error.callstack = null but nothing is taking any effect. I should note that I'm using @testing-library/react. Here are a few things I've tried:
configure({ getElementError(message) { const error = new Error([message, null]); error.name = "TestingLibraryElementError"; error.stack = null; error.callstack = null; return error; }, });
and:
configure({ getElementError(message) { const error = new Error(message); error.name = "TestingLibraryElementError"; error.stack = null; error.callstack = null; return error; }, });
and:
configure((config)=>{ return{ ...config, getElementError(message) { console.warn(message); const error = new Error(message); error.name = "TestingLibraryElementError"; error.stack = null; return error; }, } });

and more.

Any ideas?

[mcapodici]

@RobRukavina, I solved this on my build. I used the top answer here: https://stackoverflow.com/questions/64045789/stop-huge-error-output-from-testing-library for details.

This worked for me, in jest.setup.js file:

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

import {configure} from '@testing-library/dom'

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

[RobRukavina]

Thanks @mcapodici . I have tried that but I don't have a jest.setup.js file and was just trying to do this in my test file itself. Didn't work, but I have since been told that we're not worrying about this anymore so I have moved on

[nika1001]

Thank you for the ideas with getElementError. In addition to configuring @testing-library/dom I had to configure also @testing-library/react because of duplicate instances of @testing-library/dom discussed in testing-library/react-testing-library#1103

import { configure as domConf } from '@testing-library/dom'
import { configure as reactConf } from '@testing-library/react'

const TESTING_LIBRARY_CONF = {
    // prevents large unhelpful HTML DOM outputs on failed tests
    getElementError: (message: string | null) => {
        const error = new Error(message ?? undefined)
        error.name = 'TestingLibraryElementError'
        error.stack = undefined
        return error
    },
}

/**
 * Need to configure both '@testing-library/dom' and '@testing-library/react' libraries
 * since there are 2 instances of '@testing-library/dom'. 1 instance is coming from
 * '@testing-library/user-event' and another from '@testing-library/react'.
 * More info: https://github.com/testing-library/react-testing-library/issues/1103
 */
domConf(TESTING_LIBRARY_CONF)
reactConf(TESTING_LIBRARY_CONF)