Not being able to test hover styles with jest-dom and styled components

Question

I'm facing an issue while trying to test my Button component, I'll let down the code from the respective files alongside some screenshots.

Basically, I have an active and a hover style and it is being applied correctly on the application but when it comes to tests something is happening. Running the tests with the file as it is by default the test fails and the log says that the style applied is the active one, which shouldn't be happening.

When I comment the active the tests run and pass normally as it should pass. I made some tests on the actual application and everything is happening as expected as I'll show on the screenshot of the DOM.

Enough talking, someone has any idea about what's causing this issue?

// Button.styles.ts

import styled from "styled-components";

export const Button = styled.button`
  width: 100%;
  background-color: ${({ theme }) => theme.colors.primary};
  color: ${({ theme }) => theme.text.primary};
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  box-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25);
  border: none;
  padding: 1rem 1.5rem;
  font-weight: 600;
  transition: all 0.5s ease;
  font-family: "Poppins", sans-serif;
  cursor: pointer;

  &:hover {
    background-color: #000000;
    transform: scale(1.05);
  }

  &:active {
    transform: translateY(0.3rem);
  }
`;

export const Icon = styled.div`
  margin-right: 0.8rem;
  height: 100%;
  display: flex;
  align-items: center;
`;

// Button.test.tsx

import { screen, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Button from "./Button";
import Theme from "../../Theme";

describe("Button", () => {
  it("should render with correct children", () => {
    render(
      <Theme>
        <Button>Entrar</Button>
      </Theme>
    );

    const button = screen.getByText(/entrar/i);
    expect(button).toBeInTheDocument();
  });

  it("should not render any children if isLoading is passed as true", () => {
    render(
      <Theme>
        <Button isLoading={true}>Entrar</Button>
      </Theme>
    );

    const button = screen.queryByText(/entrar/i);
    expect(button).not.toBeInTheDocument();
  });

  it("should the proper style when user hover over it", () => {
    //FIXME: Não está funcionando
    render(
      <Theme>
        <Button>Entrar</Button>
      </Theme>
    );

    const button = screen.getByText(/entrar/i);
    userEvent.hover(button);
    expect(button).toHaveStyle({
      backgroundColor: "#000000",
      transform: "scale(1.05)"
    });
  });
});

it("should the proper style when user click over it", () => {
  render(
    <Theme>
      <Button>Entrar</Button>
    </Theme>
  );

  const button = screen.getByText(/entrar/i);
  userEvent.click(button);
  expect(button).toHaveStyle("transform: scale(0.95)");
});

// package.json
{
  "name": "club-clothing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings=0",
    "preview": "vite preview",
    "test": "jest --passWithNoTests",
    "test:watch": "jest --watch",
    "cypress": "npx cypress open",
    "generate": "plop --plopfile ./generators/plopfile.cjs",
    "postinstall": "npx husky install"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.1.1",
    "@reduxjs/toolkit": "^1.9.5",
    "axios": "^1.4.0",
    "firebase": "^10.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.2",
    "react-icons": "^4.10.1",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.14.2",
    "react-spinners": "^0.13.8",
    "react-toastify": "^9.1.3",
    "redux-persist": "^6.0.0",
    "styled-components": "^5.3.3",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@testing-library/cypress": "^9.0.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@types/react-redux": "^7.1.26",
    "@types/redux-logger": "^3.0.9",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "@vitejs/plugin-react": "^4.0.1",
    "cypress": "^12.17.2",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.1",
    "git-commit-msg-linter": "^5.0.4",
    "husky": "^8.0.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.1",
    "lint-staged": "^13.2.3",
    "plop": "^3.1.2",
    "prettier": "^3.0.0",
    "redux-logger": "^3.0.6",
    "ts-jest": "^29.1.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.0",
    "vite-plugin-environment": "^1.1.3"
  }
}

The error:

Button › should the proper style when user hover over it

    expect(element).toHaveStyle()

    - Expected

    - backgroundColor: rgb(0, 0, 0);
    - transform: scale(1.05);
    + transform: translateY(0.3rem);

      37 |     const button = screen.getByText(/entrar/i);
      38 |     userEvent.hover(button);
    > 39 |     expect(button).toHaveStyle({
         |                    ^
      40 |       backgroundColor: "#000000",
      41 |       transform: "scale(1.05)"
      42 |     });

      at Object.<anonymous> (src/components/Button/Button.test.tsx:39:20)

Note: I tested the userEvent with the await keyword but still the same outcome, the wrong style.