Style elements make it hard to debug failing tests

[narthur]

I'm using React testing library, which outputs the dom when a test fails. react-tooltip injects style elements into the dom, which make it hard to debug failing tests, especially when it results in the output getting cut off because it's so long. Ideally, I'd like some way to be able to turn off the style injection during testing.

Is there a way to turn off style element injection during jest test runs?

[aknee-dmi]

Running into this issue also.

[artem-deikun-katapult]

same issue on our projects :-(

[pastinepolenta]

My workaround was to mock entirely the library with

jest.mock('react-tooltip', () => jest.fn(({ children }) => children));

but I think those repeated inline styles should be fixed regardless

[stefann01]

@pastinepolenta it works only if you don't call the static methods of the ReactTooltip. Is there any way we can mock those as well?

[Elegant-Bird]

I ended up not mocking the react-tooltip and set an id and uuid instead, resulting in more consistent classnames and ids, like below

<ReactTooltip id={this.state.tooltipId} uuid={this.state.tooltipId} class='c-tooltip' type='light' html />

[GLObus303]

Just make the output in the testing library longer via screen.debug(undefined, <size of output> f.e. screen.debug(undefined, 1000000)