config: eslint-plugin-testling-library 추가/설정/적용

[#189]

packages/frontend/.eslintrc.json

@@ -34,6 +34,15 @@
     "import/prefer-default-export": "off",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
   },
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ],
   "settings": {
     "import/external-module-folders": [".yarn"]
   },

packages/frontend/package.json

@@ -59,6 +59,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.1.0",

packages/frontend/src/components/editor/__tests__/editor.spec.tsx

@@ -93,7 +93,7 @@ describe("Editor", () => {
       const $textarea = screen.getByTestId("textarea");
       await user.type($textarea, "i");
 
-      expect(document.activeElement).toEqual($textarea);
+      expect($textarea).toHaveFocus();
     });
 
     it('편집기는 입력모드로 input에는 "-- INSERT --" 이 입력 된다.', async () => {
@@ -155,7 +155,7 @@ describe("Editor", () => {
       const $input = screen.getByTestId("input");
       await user.type($textarea, ":");
 
-      expect(document.activeElement).toEqual($input);
+      expect($input).toHaveFocus();
     });
   });
 
@@ -183,7 +183,7 @@ describe("Editor", () => {
       await user.type($textarea, "i");
 
       await user.keyboard("{Escape}");
-      expect(document.activeElement).toEqual($textarea);
+      expect($textarea).toHaveFocus();
     });
 
     it("편집기는 명령모드로 textarea에 입력이 되지 않는다.", async () => {
@@ -223,7 +223,7 @@ describe("Editor", () => {
       expect($input).toHaveValue(
         "E37: No write since last change (add ! to override)",
       );
-      expect(document.activeElement).toEqual($textarea);
+      expect($textarea).toHaveFocus();
       expect($input).toHaveAttribute("readonly");
     });
 
@@ -386,11 +386,10 @@ describe("Editor", () => {
       const $textarea = screen.getByTestId("textarea");
 
       await user.type($textarea, ":");
-      expect(document.activeElement).not.toEqual($textarea);
+      expect($textarea).not.toHaveFocus();
 
       await user.keyboard("{Escape}");
-
-      expect(document.activeElement).toEqual($textarea);
+      expect($textarea).toHaveFocus();
     });
 
     it("input은 값이 비워진다.", async () => {

yarn.lock

@@ -5696,7 +5696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:^5.45.0":
+"@typescript-eslint/utils@npm:^5.45.0, @typescript-eslint/utils@npm:^5.58.0":
   version: 5.62.0
   resolution: "@typescript-eslint/utils@npm:5.62.0"
   dependencies:
@@ -9540,6 +9540,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-testing-library@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "eslint-plugin-testing-library@npm:6.2.0"
+  dependencies:
+    "@typescript-eslint/utils": "npm:^5.58.0"
+  peerDependencies:
+    eslint: ^7.5.0 || ^8.0.0
+  checksum: 00ed418670f5842151d8a195315aaaf36f4b19e62d539c67be40edf634914a95cc0f65bdb30a4e7a078aafecd5bae423dd4d1f96b2879e72bb9cb80d09a3916c
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
@@ -10337,6 +10348,7 @@ __metadata:
     eslint-plugin-react: "npm:^7.33.2"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-storybook: "npm:^0.6.15"
+    eslint-plugin-testing-library: "npm:^6.2.0"
     jest: "npm:^29.7.0"
     jest-environment-jsdom: "npm:^29.7.0"
     lint-staged: "npm:^15.1.0"