How to set up @master/styles correctly in test enviroment?

[mockingjet]

First, let me make it clear that I don't think it is required to test components with @master/styles. What I did below is testing if @master/styles turns classes into styles, which should be tested by @master/styles, not me. I should only test what I implement ( in the case below, I should test expect(iconEl).toHaveClass("b:1");). But I am still curious about it's feasibilty.

So I start my test with importing @master/styles in a setup file

// vitest-setup.ts
import "@master/normal.css";
import "@master/styles";

And then assert component's styles

// src/components/icon/icon.test.ts
import { MyIcon } from "./MyIcon.vue";
import { render } from "@testing-library/vue";
import "@testing-library/jest-dom";

test("props.bordered", async () => {
    const { container } = render(MyIcon, {
      props: {
        // if true, add "b:1" to the component class
        bordered: true,
        name: "mdi:plus",
      },
    });

   const iconEl = container.querySelector("i")
   expect(iconEl).toHaveStyle("border: 1px");
});

The test result:

Maybe @master/style uses some underlying features / mechanism that jest enviroment doesn't support, or it's just my setup went wrong. We should have document / tutorial for this topic (even if it's not recommended to test this way).

[1aron]

@mockingjet Sorry for missing this.

You can see how @master/css does the tests:

1. clone
2. npm i && npm run test