0

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

Barbu
  • 5
  • 3

1 Answers1

0

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

Barbu
  • 5
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 10 '23 at 19:23