I am using notistack with mobx,so whenever the state changes ,the toast will be shown using the enqueuesnackbar fucntion.
After upgrading mobx to version 6 it is not working on cypress.
It seems there is no issue with the mobx since other console logs and others work.Except this enqueue function.
But it is working fine on my browser(chrome)
Error:No console errors.
code:
const Toasts = ({ store }) => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const classes = useStyles();
useEffect(() => {
autorun(() => {
[...store.events, ...store.volatileGrowls].forEach(event => {
const key = event.button ? event.id : event.title + event.message;
if (event.shouldGrowl && !event.hasGrowled) {
try {
enqueueSnackbar(
<div data-test-id="toast-container">
<StriimTypography
variant={"h4"}
className={classnames(classes.toastTitle, classes.toastTextDefault)}
data-test-id={"toast-title"}
dangerouslySetInnerHTML={{ __html: xss(event.title) }}
/>
{event.message && (
<div style={{ display: "flex", alignItems: "baseline" }}>
<StriimTypography
variant={"subtitle2"}
className={classnames(classes.toastDescription, classes.toastTextDefault)}
data-test-id={"toast-description"}
dangerouslySetInnerHTML={{ __html: xss(event.message) }}
/>
{event.button &&
cloneElement(event.button, {
onClick: () => {
event.button.props.onClick();
closeSnackbar(key);
}
})}
</div>
)}
</div>,
{
variant: event.severity,
key: key,
preventDuplicate: false
}
);
} catch (error) {
console.log("error:",error)
}
event.hasGrowled = true;
store.persistEvents();
}
});
});
}, []);
return <React.Fragment></React.Fragment>;
};
React version: 18 with StrictMode
notistack: 1.0.10
mobx:6