Tengo un botón que cambia de color y la escala de los niños al pasar el mouse. Cuando trato de desencadenar esta interacción con rtl/jest, mi prueba falla con el siguiente mensaje: Los Compared values have no visual difference.

Mi botón tiene el siguiente estilo:

 &:hover, &:focus { * { cursor: pointer; } background: ${(props) => lighten(0.1, props.theme.primary)}; // lighten function from polished transition: background 0.25s; figure { transform: scale(0.9); transition: transform 0.25s ease; } }

El JSX:

 <StyledFABButton aria-label="Open window" onClick={handleClickFAB}> <StyledIconWrapper data-testid="breifcase-icon-wrapper"> <BriefcaseIcon /> </StyledIconWrapper> </StyledFABButton>

Y mis pruebas:

 it("should change button appearance if FAB is hovered", () => { jest.useFakeTimers(); jest.spyOn(global, "setTimeout"); customRender(<FAB />, {}); const button = screen.getByLabelText(/Open window/i); fireEvent.mouseEnter(button); expect(button).not.toHaveStyle("background: #31c04d"); }); it("should change icon appearance if FAB is hovered", () => { jest.useFakeTimers(); jest.spyOn(global, "setTimeout"); customRender(<FAB />, {}); const button = screen.getByLabelText(/Open Recruitbot/i); fireEvent.mouseEnter(button); const iconWrapper = screen.getByTestId(/breifcase-icon-wrapper/i); expect(iconWrapper).toHaveStyle("transform: scale(0.9)"); });

He tenido problemas anteriores con funciones polished , pero esto no ha sido un problema desde que incorporé mi customRender , que simplemente envuelve el componente en ThemeProvider y ContextProvider .

EDITAR: Aquí está mi customRender:

 // contextProps is just a fake context object export const customRender = ( ui: any, { contextProps = baseMockContext, ...renderOptions }: any ) => { return render( <ThemeProvider theme={theme}> <AppContext.Provider value={contextProps}>{ui}</AppContext.Provider> </ThemeProvider>, renderOptions ); }; export * from "@testing-library/react";