How can I set css modules?

[brgndyy]

now I am studying with Next.js 13 and vitest, but there is an error in the toHaveStyle part.

Since I use css modules when applying css, I tried npm test by applying css modules to the button, but it doesn't work normally.

I googled and set vitest.config.ts, but it doesn't work normally. Is there any solution?

• vitest.config.ts

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"), // src폴더 안에 __test__ 폴더 생성
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/__tests__/index.test.tsx",
    css: {
      modules: {
        classNameStrategy: "non-scoped",
      },
    },
  },
});

• Header.tsx

import classes from "./Header.module.css";

export default function Header() {
  return (
    <div>
      <button className={classes.test_button}>Change to blue</button>
    </div>
  );
}

• Header.module.css

.test_button{
    background-color: rgb(255, 0, 0);
}

• index.test.ts

import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import matchers from "@testing-library/jest-dom/matchers";
import Header from "@/components/Header";

expect.extend(matchers);

test("Home", () => {
  render(<Header />);

  // find a role
  const colorButton = screen.getByRole("button", { name: "Change to blue" });

  // button's color is red
  expect(colorButton).toHaveStyle({ backgroundColor: "rgb(255, 0, 0)" });
});

What shoud I do ? please help !