Merge pull request #334 from DaleStudy/264-fix-config

eslint-plugin-testing-library 설정 문제

Author: DaleSeo

eslint.config.js

@@ -28,20 +28,6 @@ export default tseslint.config(
   },
   {
     files: ["src/components/**/*.test.[jt]s?(x)"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: {
-        ...globals.browser,
-        ...globals.vitest,
-      },
-    },
-    plugins: {
-      "testing-library": testingLibrary,
-    },
-    rules: {
-      "testing-library/await-async-queries": "error",
-      "testing-library/no-debugging-utils": "warn",
-      "testing-library/no-dom-import": "off",
-    },
+    ...testingLibrary.configs["flat/react"],
   },
 );

src/components/Checkbox/Checkbox.test.tsx

@@ -96,12 +96,16 @@ test("disabled 속성이 올바르게 적용됨", () => {
 test("필수 표시가 올바르게 표시됨", () => {
   render(<Required />);
 
-  const requiredLabel = screen.getByText("필수 체크박스").parentElement;
-  const optionalLabel = screen.getByText("선택 체크박스");
-
-  // Check for required indicator (asterisk)
-  expect(requiredLabel).toContainHTML("*");
-  expect(optionalLabel).not.toContainHTML("*");
+  expect(
+    screen.getByRole("checkbox", {
+      name: "필수 체크박스 *",
+    }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("checkbox", {
+      name: "선택 체크박스",
+    }),
+  ).toBeInTheDocument();
 });
 
 test("체크박스 클릭 시, onChange 핸들러가 호출됨", async () => {

src/components/Icon/Icon.test.tsx

@@ -8,6 +8,7 @@ const { Basic } = composeStories(stories);
 test("SVG 요소를 렌더링한다", () => {
   const { container } = render(<Basic />);
 
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
   expect(container.querySelector("svg")).toBeInTheDocument();
 });
 
@@ -20,6 +21,7 @@ test.each([
 ] as const)("%s 크기에 올바른 클래스를 적용한다", (size, className) => {
   const { container } = render(<Basic size={size} />);
 
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
   expect(container.querySelector("svg")).toHaveClass(className);
 });
 
@@ -33,6 +35,7 @@ test.each([
 ] as const)("%s 톤에 올바른 색상 클래스를 적용한다", (tone, className) => {
   const { container } = render(<Basic tone={tone} muted={false} />);
 
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
   expect(container.querySelector("svg")).toHaveClass(className);
 });
 
@@ -42,6 +45,7 @@ test.each([
 ] as const)("muted가 %s일 때 올바른 클래스를 적용한다", (muted, className) => {
   const { container } = render(<Basic tone="neutral" muted={muted} />);
 
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
   expect(container.querySelector("svg")).toHaveClass(className);
 });
 
@@ -62,6 +66,7 @@ test.each([
   "%s 톤과 muted=%s 조합으로 SVG 요소를 렌더링한다",
   (tone, muted) => {
     const { container } = render(<Basic tone={tone} muted={muted} />);
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const svg = container.querySelector("svg");
 
     expect(svg).toBeInTheDocument();
@@ -83,6 +88,7 @@ test.each([
   ["info", true],
 ] as const)("%s 톤과 muted=%s 조합으로 class 속성을 가진다", (tone, muted) => {
   const { container } = render(<Basic tone={tone} muted={muted} />);
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
   const svg = container.querySelector("svg");
 
   expect(svg).toHaveAttribute("class");
@@ -105,6 +111,7 @@ test.each([
   "%s 톤과 muted=%s 조합으로 색상 클래스를 포함한다",
   (tone, muted) => {
     const { container } = render(<Basic tone={tone} muted={muted} />);
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const svg = container.querySelector("svg");
 
     const hasColorClass = Array.from(svg?.classList || []).some(

src/components/Link/Link.test.tsx

@@ -20,6 +20,7 @@ describe("렌더링 테스트", () => {
 
     const link = screen.getByRole("link");
     expect(link).toHaveTextContent("링크");
+    // eslint-disable-next-line testing-library/no-node-access
     expect(link.querySelector("svg")).toBeInTheDocument();
   });
 });

src/components/RadioGroup/RadioGroup.test.tsx

@@ -203,8 +203,10 @@ describe("Radio", () => {
     const radio = screen.getByRole("radio", { name: "Option 1" });
     expect(radio).toBeInTheDocument();
 
+    // eslint-disable-next-line testing-library/no-node-access
     const container = radio.closest("label");
     expect(
+      // eslint-disable-next-line testing-library/no-node-access
       container?.querySelector('div[class*="border"]'),
     ).toBeInTheDocument();
   });