testing-library
Allow narrowing down the part of the DOM that is printed when queries fail
Describe the feature you'd like:
When a query fails, the default behavior appears to be to log the entire <body /> in the error message. In our case, even during tests, the body contains a lot of <script> tags, which makes the output so long that we don't get to see the actual interesting part, where the error is.
It would be great if we could specify which part of the DOM we want to be logged, as I control the wrapping element, and know how to query it. So a kind of config that says onErrorQuery: '.test-wrapper' could query for that element and print it?
Here's an example
Unable to find an element with the text: All files. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<script
type="text/javascript"
>
__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%402.0%22%2C%22gitCommitHash%22%3A%22bee1380c47f2431e7543c64da04c16cffd03b27c%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%5C%22driverPackage%5C%22%3A%5C%22meteortesting%3Amocha%5C%22%2C%5C%22isAppTest%5C%22%3Afalse%2C%5C%22isTest%5C%22%3Atrue%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%22microservice%22%3A%22admin%22%2C%22environment%22%3A%22dev%22%2C%22google_maps_key%22%3A%22AIzaSyCdoi6BxlTf7GgxqAGAsd1ADM_UwgqWUP8%22%2C%22subdomains%22%3A%7B%22api%22%3A%22http%3A%2F%2Flocalhost%3A5500%22%2C%22admin%22%3A%22http%3A%2F%2Flocalhost%3A5000%22%2C%22app%22%3A%22http%3A%2F%2Flocalhost%3A4000%22%2C%22backend%22%3A%22http%3A%2F%2Flocalhost%3A5500%22%2C%22pro%22%3A%22http%3A%2F%2Flocalhost%3A4100%22%2C%22www%22%3A%22http%3A%2F%2Flocalhost%3A3000%22%7D%2C%22mochaRuntimeArgs%22%3A%7B%22mochaOptions%22%3A%7B%22grep%22%3Afalse%2C%22invert%22%3Afalse%2C%22serverReporter%22%3A%22xunit%22%2C%22clientReporter%22%3A%22xunit%22%2C%22serverOutput%22%3A%22%2Fhome%2Fcircleci%2Fapp%2Fresults%2Funit-server.xml%22%2C%22clientOutput%22%3A%22%2Fhome%2Fcircleci%2Fapp%2Fresults%2Funit-client.xml%22%7D%2C%22runnerOptions%22%3A%7B%22runClient%22%3Atrue%2C%22runServer%22%3Afalse%2C%22browserDriver%22%3A%22puppeteer%22%2C%22testWatch%22%3Afalse%2C%22runParallel%22%3Afalse%7D%7D%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22_hmrSecret%22%3A%22fd025f14551ba3c0663add63ee8c159ade192e50cf3ca13debd00f3f5b49400f7ee3bd92ea847a333e9eb07573450f36f873341b69fc5fe73d699ee2271af002%22%2C%22reactFastRefreshEnabled%22%3Atrue%2C%22meteortesting%3Amocha-core_config%22%3A%22%7B%5C%22forbidOnly%5C%22%3Atrue%7D%22%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%221b03a8526f1fa1e2344655cf0162f6a596c2e08c%22%2C%22versionRefreshable%22%3A%22416dd968fa897bf40b5a30a1ad2a9dbf1cd2f3f1%22%2C%22versionNonRefreshable%22%3A%221b03a8526f1fa1e2344655cf0162f6a596c2e08c%22%2C%22versionReplaceable%22%3A%22416dd968fa897bf40b5a30a1ad2a9dbf1cd2f3f1%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22s6izz8zbdmmi.ir22rcw5pwnq%22%7D%2C%22appId%22%3A%22s6izz8zbdmmi.ir22rcw5pwnq%22%2C%22isModern%22%3Atrue%7D"))
</script>
<script
src="/packages/meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d"
type="text/javascript"
/>
<script
src="/packages/meteor-base.js?hash=29010b127daf4ebacaaf9db9b8a61487e57d7d86"
type="text/javascript"
/>
<script
src="/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c"
type="text/javascript"
/>
<script
src="/packages/modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f"
type="text/javascript"
/>
<script
src="/packages/modules.js?hash=c244c67d5857c87afa25245102ae430b2f3a556d"
type="text/javascript"
/>
<script
src="/packages/modern-browsers.js?hash=54726531b4795563b9a80c7b5a0cd309bbcf0864"
type="text/javascript"
/>
<script
src="/packages/babel-compiler.js?hash=8c5705ac79152fc21e82c438dba99009224c6cec"
type="text/javascript"
/>
<script
src="/packages/hot-module-replacement.js?hash=22d8cfbe1ca1509fc13b6f268883287a7c6b3b6c"
type="text/javascript"
/>
<script
src="/packages/react-fast-refresh.js?hash=b6c1b2fb7b85526cb964fb12dbb325c90c3ae990"
type="text/javascript"
/>
<script
src="/packages/ecmascript.js?hash=6aac20a70923a44476d944a4d125196412f1aa5a"
type="text/javascript"
/>
<script
src="/packages/ecmascript-runtime.js?hash=f47aa897b4de5ae6f0c0017bb5398dfb81681191"
type="text/javascript"
/>
<script
src="/packages/babel-runtime.js?hash=c4994a0e8fd67db094a0635e8fcb0355c0cb7c1c"
type="text/javascript"
/>
<script
src="/packages/promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c"
type="text/javascript"
/>
<script
src="/packages/fetch.js?hash=0b9fdd2f5e9d2d8b0f9d52621e86d2fdcf0b4140"
type="text/javascript"
/>
<script
src="/packages/dynamic-import.js?hash=3bc51bea4e14cfec0e3cd05ada6fbd83aae8f92f"
type="text/javascript"
/>
<script
src="/packages/es5-shim.js?hash=5a0c0b4a871e6831f41adcf5125f8849af0dccc6"
type="text/javascript"
/>
<script
src="/packages/ecmascript-runtime-client.js?hash=c5953dc3019ce157fa142871649fc345d9c89924"
type="text/javascript"
/>
<script
src="/packages/base64.js?hash=d815902a305964cd5d5124cfca68a5d562f2ebab"
type="text/javascript"
/>
<script
src="/packages/ejson.js?hash=18007405fd1814ce9b3b5e6b00e070ceb25ffa72"
type="text/javascript"
/>
<script
src="/packages/diff-sequence.js?hash=e7fa948eeff64f908873f6c77502554d52a4d615"
type="text/javascript"
/>
<script
src="/packages/geojson-utils.js?hash=574576455f62f44cc91645f1ffa25291c5570d40"
type="text/javascript"
/>
<script
src="/packages/id-map.js?hash=49a2eb01ca354603f5cf6a364a3e58c5a0873e53"
type="text/javascript"
/>
<script
src="/packages/random.js?hash=d072c94358e70b22c75e95559471ca75f78e4e64"
type="text/javascript"
/>
<script
src="/packages/mongo-id.js?hash=bf89be67790e02a065ad87c0803798c9b9be4f61"
type="text/javascript"
/>
<script
src="/packages/ordered-dict.js?hash=0542cdf204403ec33348fd779911ad2b9b4e7a48"
type="text/javascript"
/>
<script
src="/packages/tracker.js?hash=5ef67b97eaf2ca907dc38459283f2349bada6814"
type="text/javascript"
/>
<script
src="/packages/minimongo.js?hash=1adf430b764303f94c69db2f8fe0a2da539aa476"
type="text/javascript"
/>
<script
src="/packages/check.js?hash=75acf7c24e10e7b3e7b30bb8ecc775fd34319ce5"
type="text/javascript"
/>
<script
src="/packages/retry.js?hash=687659eb641def936a59de913280418c7d832945"
type="text/javascript"
/>
<script
src="/packages/callback-hook.js?hash=6760faa220114e35df517db805f6ca0fe2b9c2ab"
type="text/javascript"
/>
<script
src="/packages/ddp-common.js?hash=e155eb98000548e178b4993ea1b69407d4a547ec"
type="text/javascript"
/>
<script
src="/packages/reload.js?hash=f447bf6e7b53c13e47d38152b484a9f86e77d692"
type="text/javascript"
/>
<script
src="/packages/socket-stream-client.js?hash=50e1fc1ec576cba39c38336d2bd55ba023e60bc6"
type="text/javascript"
/>
<script
src="/packages/ddp-client.js?hash=9e4081c1b0dfde446688af96b8d9e8494e67fe2a"
type="text/javascript"
/>
<script
src="/packages/ddp.js?hash=675438ff1bf207eeda74d574359af6643aefb5fd"
type="text/javascript"
/>
<script
...
Facing the same issue with karma. Though I wouldn't narrow it by container. That breaks down once you're UI library supports portals and you can actually have rendered element in a "container" and body.
It seems to me that we should just ignore <script /> elements by default.
Is there no way to specify where portals should be rendered? Or do they always render in the body tag?
Is there no way to specify where portals should be rendered? Or do they always render in the body tag?
That's not really relevant here. You shouldn't change the implementation just for tests.
Started the effort in https://github.com/testing-library/dom-testing-library/compare/master...eps1lon:feat/pretty-dom-noise.
Though it seems like pretty-format does not allow to return "nothing". By returning an empty string the spacing is appended (a newline in our case) which produces
<body>
<p>
Hello, Dave
</p>
</body>
from
<body>
<script
src="context.js"
/>
<!-- Some comment -->
<p>
Hello, Dave
</p>
</body>
which isn't ideal.
So either I'm missing some API in pretty-format or we first need to add "return nothing" as a feature to pretty-format.
Could we update this line to the following, that way we can override some tags?
export const DEFAULT_IGNORE_TAGS = process.env.DEFAULT_IGNORE_TAGS || 'script, style';
I'd like to hide svg path elements from the error debug output which can bloat the output quite a lot.
Seems like updating this config option should work: https://testing-library.com/docs/dom-testing-library/api-configuration/#defaultignore, but I am not seeing what I would expect.
Seems like updating this config option should work: https://testing-library.com/docs/dom-testing-library/api-configuration/#defaultignore, but I am not seeing what I would expect.
This is working for me after upgrading to the latest version (8.18.1 -> 8.19.0).