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

Toasts trolling me in tests

See original GitHub issue

🐛 Bug report

Toasts cause headaches during testing.

  1. There is no easy way to clear all toasts without any exit animation. They always linger around, messing with dom element selection. You have to wait 401ms for all toasts to be gone. Is there a way to disable the animation in tests?

  2. Toast renders two alerts, one visible one in the toast manager, another hidden one meant for accessibility rendered into a role=status element. This makes selection difficult because it’s hard to select by role of ‘alert’, or by the text contents, because there is always two elements found.

  3. Toast Manager renders persistent dom elements into every test and adds to cognitive overload while reviewing snapshots or screen.debug output.

<div id="chakra-toast-portal"><ul id="chakra-toast-manager-top" style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; top: 0px; right: 0px; left: 0px;"></ul><ul id="chakra-toast-manager-top-left" style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: 0px; left: 0px;"></ul><ul id="chakra-toast-manager-top-right" style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: 0px; right: 0px;"></ul><ul id="chakra-toast-manager-bottom-left" style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: 0px; left: 0px;"></ul><ul id="chakra-toast-manager-bottom" style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; bottom: 0px; right: 0px; left: 0px;"></ul><ul id="chakra-toast-manager-bottom-right" style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: 0px; right: 0px;"></ul></div>

💥 Steps to reproduce

Install Chakra and react-testing-library.

  1. Show a toast.
  2. Now try to select alert via RTL

💻 Link to reproduction

This shows the double alert causing selection issues. https://codesandbox.io/s/chakra-toast-renders-two-alerts-mlhyr

🧭 Possible Solution

  1. Add an option to remove all toasts outside of a component (for example in an afterEach) and disable animations while doing so. I know there is removeAll, is this callable outside of the useToast hook?
  2. Somehow hide one of the alerts from the accessibility tree? Maybe we can hide the visible alert, since the “hidden” one is really the one meant to be seen by screenreaders.
  3. Do not render the Toast Manager divs unless a toast is present.

🌍 System information

Software Version(s)
Chakra UI 1.0.3
Browser Chrome
Operating System Mac

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:48
  • Comments:24 (3 by maintainers)

github_iconTop GitHub Comments

18reactions
avaragadocommented, Jun 20, 2021

keepalive packet

17reactions
dca123commented, Mar 14, 2021

Anytime I render any component using the jest + react testing library, the toast manager is also included in that render. Is there any workaround for this problem?
For example, when I render a ChakraButton, I receive -

<body>
      <div
        id="chakra-toast-portal"
      >
        <ul
          id="chakra-toast-manager-top"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; top: 0px; right: 0px; left: 0px;"
        />
        <ul
          id="chakra-toast-manager-top-left"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: 0px; left: 0px;"
        />
        <ul
          id="chakra-toast-manager-top-right"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: 0px; right: 0px;"
        />
        <ul
          id="chakra-toast-manager-bottom-left"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: 0px; left: 0px;"
        />
        <ul
          id="chakra-toast-manager-bottom"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; bottom: 0px; right: 0px; left: 0px;"
        />
        <ul
          id="chakra-toast-manager-bottom-right"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: 0px; right: 0px;"
        />
      </div>
      <div>
        <button
          class="chakra-button css-113xcha"
          type="button"
        />
      </div>
    </body>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Top drinking toasts. - TexAgs
When we drink, we get drunk. When we get drunk, we fall asleep. When we fall asleep, we commit no sin. When we...
Read more >
If You Seek a COVID Test, Solve The Troll's Riddle on Your ...
If You Seek a COVID Test, Solve The Troll's Riddle on Your Quest! ... But first, you must answer me these questions four:....
Read more >
123 Genius Trolls Who Took Trolling To Another Level
Some people are just born to troll, and with pranks as good as these, they're sure ... Wife Left A Note Saying She...
Read more >
Is my trolling motor toast? Help!! - Walleye Message Central
Walleye Boats and Motors > Is my trolling motor toast? Help!! Wauger-eye 08:16 PM 04-29-2000. Hey gang. I have a 24 volt Motorguide...
Read more >
When Twitter trolling lands you in jail: Dallas case tests limits ...
Records show Taherzadeh tweeted on June 8: "Wanna see me bitch slap a State District Judge? I am not one to trifle with."...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

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

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found