Cypress: Mouse leave event not triggered

[mparpaillon]

Current behavior:

While .trigger('mouseover'); triggers onMouseEnter event but .trigger('mouseleave'); doesn't trigger onMouseLeave event (React app)

Desired behavior:

.trigger('mouseleave'); should trigger onMouseLeave event

Steps to reproduce: (app code and test code)

Checkout this stackblitz: https://stackblitz.com/edit/react-dmfnux?file=index.js
"Enter" and "leave" events both work well

Try this test

context('Hovering', () => {
  it('should load properly', () => {
    cy.visit('https://react-dmfnux.stackblitz.io');
    cy.get('#target', { timeout: 60000 }).should('be.visible');
  });

  it('should trigger mouseleave event', () => {
    cy.get('#target').trigger('mouseover');
    cy.get('#text').should('contain', 'enter');
    cy.get('#target').trigger('mouseleave');
    cy.get('#text').should('contain', 'leave');
  });
});

and see it fail

Versions

Chrome 72, Mac OS Mojave, Cypress 3.1.5

[Bkucera]

Your app is listening for mouseout as shown here:

React does this under the hood, when you set onMouseEnter/onMouseLeave, it listens on mouseover/mouseout.

[mparpaillon]

Thanks @Bkucera !

[isanda-notshe]

Thank you @Bkucera :)