reactjs - test tailwindcss styles with react testing library

Question

I want to test that div receives correct styles from tailwindcss and have 2 questions related to that:

1. How do we setup tailwindcss in a test file, so that styles related to classNames are applied?
2. How do I access tailwindcss's theme property in a test

Here is a code that I am working with:

Dropdown.tsx

type Props = {
    items: string[];
};
export const Dropdown = ({ items }: Props) => {
    const defaultItem = items.length > 0 ? items[0] : "";
    return (
        <div role="dropdown">
            <div role="dropdown-toggle" className="p-1">{defaultItem}</div>
        </div>
    );
};

Dropdown.test.tsx

test("should render dark grey rounded border when collapsed", () => {
    const items = ["item1", "item2"];
    render(<Dropdown items={items} />);
    expect(screen.getByRole("dropdown-toggle")).toHaveStyle(`
        border-radius: 4px;
        border-color: ???; <---- how can access tailwind css theme?
    `);
});

Answer 1

等待大神答复