fkhadra / fkhadra/react-toastify

request: a variant of ToastContainer for testing that is always empty regardless of toasts submitted for consistent snapshot testing

Open
#1,168 0 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.