How can I set css modules?
brgndyy opened this issue · comments
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 !