Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

lewisandrewcommented, Apr 29, 2022

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.

0reactions

jeffalcommented, Nov 30, 2022

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

Top Results From Across the Web

Improving React Testing Library tests | Alex Khomenko

Luckily, the query accepts a second param, which is an options object, where we can narrow down the match using the name attribute....

Uncaught (in promise) dom-to-image - Stack Overflow

I was able to find this by changing the DIV I was making an image of until I was able to narrow down...

C# in a Nutshell - LINQ Quiz

Given the following statement: var query = from c in colors where c.Length > 3 orderby c.Length select c;. what type is query?...

Common mistakes with React Testing Library - Kent C. Dodds

If get* queries are unsuccessful in finding the element, they'll throw a really helpful error message that shows you the full DOM structure...

React Refs with TypeScript - Medium

Instead of replying, I've decided to write down this “short post” about how to handle React DOM refs and ref forwarding with TypeScript...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

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

Describe the feature you’d like:

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

jest.useRealTimers() is not a function when running RTL tests in jest-electron environment

Tests with setTimeout fail after update to v7.29.6