fkhadra / fkhadra/react-toastify
request: a variant of ToastContainer for testing that is always empty regardless of toasts submitted for consistent snapshot testing
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
**Do you want to request a *feature* or report a *bug*?**
Feature
**What is the current behavior?**
For our unit testing we use [snapshot testing](https://vitest.dev/guide/snapshot.html) to ensure no random component changes and to have a text-based view of the component tree during manual review. This often causes problems with Toasts however as we have a lot of async data (using [msw](https://mswjs.io) in tests) and sometimes toasts are present and sometimes they aren't which then causes the snapshot to fail. We have attempted several workarounds for this issue and for some scenarios these have worked, but ultimately they are hacks and not ideal. If this library could provide a component such as `TestToastContainer` that functionally works the same as `ToastContainer` but whose children are always empty so the rendered DOM tree is always the same that would solve our problems.
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:**
N.A.
**What is the expected behavior?**
N.A.
**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
react: 18.3.1
react-toastify: 10.0.5
Contributor guide
Research direction
Start by locating the existing ToastContainer component and the unit tests that use snapshot testing. Review how submitted toasts become rendered children, then compare the resulting DOM with and without async toasts from msw. Done means a testing variant keeps its rendered children empty and produces consistent snapshots.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100