the css file is not taken into account in the tests of my custom library

Question

i want to test the Hover onto one off my element into my custom lib but there is an issues when testing if the hover correctly apply my choosen style it seems that my css file is not taken when using the custom lib

it should get on hover this style properties

.btn-base:hover {
background-color: #ababab;
}

but when testing it, it return an error in the vite:ui it return this

the error

Hover Button Test

 Error: expect(element).toHaveStyle()

 Expected   "background-color: rgb(233, 233, 233);"
 Received   "background-color: ButtonFace;"Error: expect(element).toHaveStyle()

 Expected   "background-color: rgb(233, 233, 233);"
 Received   "background-color: ButtonFace;"

my test

      const user = userEvent.setup();
      render(<TestDisabledButton />);
      const button = screen.getByRole("Button");
      expect(button).toHaveClass("btn-base");

      expect(button).toHaveStyle("background-color:#e9e9e9");

      await waitFor(() => {
        user.hover(button);
        expect(button).toHaveStyle("background-color: #ababab");
      });
    });

I've tried to use an other synthaxes and test other method to see the css properties but nothing worked well

Answer 1

solved by adding css:true to the custom preset from vitest