unit-testingtestingreact-testing-libraryvitestjest-dom

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


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

Solution

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