react-toast-notifications | 🍞 A toast notification system for react | Notification library

1. Install all these dependencies in dev. In my case I am using typescript, if you are using javascript, skip types. Run npm i -D and all these dependencies.

   @types/enzyme @types/enzyme-adapter-react-16 enzyme enzyme-adapter-react-16 jest-environment-enzyme jest-enzyme @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest ts-jest

2. In root of your project, create a file named jest.config.js and inside put this code :

module.exports = { preset: 'ts-jest', testEnvironment: 'node', modulePathIgnorePatterns: ["/dist/"], };

1. In the same root of the project, create a file called jest.config.unit.js and put this code there:

Using the as keyword like this can lead to errors on your code... For example, supose you misspeled the word "error" as "eror", you would write something like this

Fixed it. it's because i used return on router.push("...")

In your package.js file, there were some bugs.

Glancing at the react-toastify code you can see it’s using an event emitter pattern. The listens for events that get dispatched (or emitted) when you call toast.info. When it gets an event it updates its internal state (presumably) to show the message.

TLDR: They're communicating indirectly through the eventManager, which exposes methods for 1) dispatching events and 2) registering listeners for those events.

It's similar to the way an onclick handler works in the DOM.

Here's a very rudimentary implementation of the basic pattern: It just appends a div to the document each time the button is clicked. (This isn't React- or toastify-specific. But it demonstrates the core idea.)

Notice that the button's click handler doesn't know anything about what happens. It doesn't append the div. It just emits an event via the EventBus instance described below.

The EventBus class provides an on method to register a listener. These are often called addEventListener or addListener, or they have an event-specific name like onClick, onChange, etc., but they all do the same basic thing: register a function to be invoked in response to an event. (This class is essentially a dumber implementation of react-toastify's eventManager.)

The on method adds the provided handler to an internal array. Then, when an event is fired (via emit) it just iterates over the array invoking each one and passing in the event information.

Cleaning up the indentation of your code, you notice the following problems:

You can use withToastManager HOC to archive that work

Here is an example

i changed the Courses component and used useSelector()and useDispatch() function instead of connect .this way i was able to access the state.i removed the props argument from functional component Courses .more over removed mapStateToProps and connect completely.i am sharing so that may be helpful for anyone.

Seems like you need to pass the needed dependency to useEffect as mentioned in the error message.