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.

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

Show a toast.
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

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?
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.
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:
Created 3 years ago
Reactions:48
Comments:24 (3 by maintainers)

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