React-toastify: How to add "id" attribute for testing purpose?

[CrispusDH]

Hello, I do not find a good way for adding unique "id" attribute for the toast and toast body. Currently, I work within className but would be great to have optional parameter id. Thanks

[fkhadra]

Hey @CrispusDH,

Could you share which kind of test you would like to implement ?

[CrispusDH]

I write e2e UI automation tests using Protractor framework. Currently, I'm using className and bodyClassName for identifying Toast element and text inside. But, best practice is to add id attributes and use them. @fkhadra , thanks for fast response.

[CrispusDH]

@fkhadra , any updates? :)

[fkhadra]

Hello @CrispusDH,

The end of the year is quite busy for me at work 😞 . I'll get back to you as soon as possible, sorry for that.

[CrispusDH]

@fkhadra , If you need some more information just let me know. Thanks

[CrispusDH]

Close, due to @fkhadra inactivity

[zip184]

I want this feature too? QA is having a tough time checking for toastify messages.

[fkhadra]

I'll consider adding this for the next patch release

[fkhadra]

Hi all,

I have a suggestion for this one.
If you define an id on ToastContainer, this id will be used:

<ToastContainer id="foo"> -> <div id="foo" {...othersProps}>...<div/>

For the toast, I suggest to use the toastId as the htmlid:

toast('hello', {
  toastId: 'xxx'
});
<div id="xxx" {...othersProps}>...<div/>

Is that what you are looking for ?

[JulianoGTZ]

The End to end test has implemented with Cypress?

Where I work, the shared function was implemented like this

Cypress.Commands.add('checkToastMessage', (message) => {
    cy.get('.Toastify__toast').should('contain', message);
    cy.closeAllAlertMessages();
});

Cypress.Commands.add('closeAllAlertMessages', () => {
    cy.get('.Toastify__close-button').click({ multiple: true, force: true });
});