diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json index acceeee..2a668ec 100644 --- a/packages/frontend/.eslintrc.json +++ b/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"] }, diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 80d0ed5..a418cdb 100644 --- a/packages/frontend/package.json +++ b/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", diff --git a/packages/frontend/src/components/editor/__tests__/editor.spec.tsx b/packages/frontend/src/components/editor/__tests__/editor.spec.tsx index 5c18052..a305b70 100644 --- a/packages/frontend/src/components/editor/__tests__/editor.spec.tsx +++ b/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 () => { diff --git a/yarn.lock b/yarn.lock index e1d5244..e8634fa 100644 --- a/yarn.lock +++ b/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"