testing-library / testing-library/dom-testing-library

Allow narrowing down the part of the DOM that is printed when queries fail

Open
#902 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
3.3k
Forks
474
No merged PRs in 30d

Description

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
   ...

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the failed-query error path and how the current error message serializes the document body. Define how a selector such as .test-wrapper is configured and applied, then verify that failed queries show the selected DOM region instead of the entire body.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
testing-qa
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.