I have a button that changes colour and and the children scale on hover. When I try to trigger this interaction with rtl/jest, my test fails with the following message: Compared values have no visual difference.

My button is styled as follows:

    &: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;
      }
    }

The JSX:

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

And my tests:

  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)");
  });

I've had previous issues with polished functions, but this hasn't been an issue since I incorporated my customRender, which simply wraps the component in a ThemeProvider and ContextProvider.

EDIT: Here's my 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";