try to use realHover()

cypress/component/baseball-card.cy.js

@@ -70,19 +70,23 @@ describe('BaseballCard Component', () => {
     cy.mount(BaseballCard, { props });
 
     // // Simulate hover interaction
-    cy.get('.front').should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)');
-
+    cy.get('.front').should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)')
+      .and('be.visible');
+
     // Check that the back side is rotated out of view
-    cy.get('.back').should('have.css', 'transform', 'matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1)');
-
+    cy.get('.back').should('have.css', 'transform', 'matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1)')
+      .and('not.be.visible');
+
+    cy.get('.flip-container').realHover().should(($div) => {
+      expect($div.find('.front')).to.not.be.visible;
+    });
 
-    cy.get('.flip-container').trigger('mouseover');
-
     // Check that the back side is now visible
-    cy.get('.back').should('have.css', 'transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
-    
+//    cy.get('.back').realHover().should('have.css', 'transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
+
     // Check that the front side is now rotated out of view
-    cy.get('.front').should('have.css', 'transform', 'matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
-
+ //   cy.get('.flipcontainer').realHover().should('not.be.visible');
+//.should('have.css', 'transform', 'matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
+
   });
 })

cypress/support/component.js

@@ -1,3 +1,4 @@
 import { mount } from 'cypress/vue';
+import "cypress-real-events";
 
 Cypress.Commands.add('mount', mount);

package.json

@@ -13,6 +13,7 @@
     "e2e": "playwright test",
     "e2e-ci": "playwright install --with-deps && playwright test",
     "serve-http": "vite preview --port 8080",
+    "cy:open": "cypress open",
     "cy:run": "cypress run --component"
   },
   "dependencies": {
@@ -51,6 +52,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "cypress": "^13.17.0",
+    "cypress-real-events": "^1.13.0",
     "eslint-plugin-html": "^7.1.0",
     "file-loader": "^6.2.0",
     "http-server": "^14.1.1",