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 chosen 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 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
test("Hover Button Test", async () => { const user = userEvent.setup(); render(); 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 another syntax and test other method to see the CSS properties, but nothing worked well
solved by adding css:true to the custom preset from vitest