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.

当我注释活动时，测试运行并正常通过，因为它应该通过。我在实际应用程序上进行了一些测试，一切都如我将在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.

注意：我使用aWait关键字测试了userEvent，但仍然是相同的结果，样式错误。