Merge pull request #92 from saseungmin/refactor/eslint

refactor: 모든 파일에 변경된 eslint 룰 적용

.eslintrc.js

@@ -5,6 +5,11 @@ module.exports = {
     browser: true,
     jest: true,
   },
+  globals: {
+    context: 'readonly',
+    given: 'readonly',
+    cy: 'readonly',
+  },
   ignorePatterns: [
     'build/',
     'node_modules/',
@@ -55,14 +60,17 @@ module.exports = {
       },
     },
     {
-      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(test).[jt]s?(x)'],
       extends: ['plugin:testing-library/react', 'plugin:jest/recommended'],
       rules: {
-        // set your test eslint rules
+        'jest/no-identical-title': 'off',
+        'testing-library/no-unnecessary-act': 'off',
       },
     },
   ],
   rules: {
-    // set your rules
+    'react/prop-types': 'off',
+    'no-underscore-dangle': ['error', { allow: ['_id'] }],
+    camelcase: ['error', { allow: ['snapshot_UNSTABLE', 'access_token', 'drop_console'] }],
   },
 };

.husky/pre-commit

@@ -1,5 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint
-npm run coverage
+yarn run lint
+yarn run coverage

@types/jest.d.ts

@@ -0,0 +1,4 @@
+declare const given: {
+  <T = never>(key: string, callback: () => T): T
+  [key: string]: never
+};

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "webpack-dev-server --progress",
     "test": "jest",
-    "test:watch": "yarn run test -- --watch-all",
+    "test:watch": "yarn run test --watch-all",
     "coverage": "yarn run test --coverage",
     "lint": "eslint --ext js,jsx .",
     "build": "cross-env NODE_ENV=production webpack",

src/App.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { act } from 'react-dom/test-utils';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 
 import { RecoilRoot } from 'recoil';
 
@@ -54,33 +54,33 @@ describe('App', () => {
       todos,
     }));
 
-    const { getByTestId, container } = renderApp({});
+    const { container } = renderApp({});
 
     expect(container).toHaveTextContent('What are your plans for today?');
     expect(container).toHaveTextContent('ALL');
     expect(container).toHaveTextContent('할 일1');
     expect(container).toHaveTextContent('CLEAR COMPLETED');
-    expect(getByTestId('theme-toggle')).toHaveAttribute('title', 'light');
+    expect(screen.getByTestId('theme-toggle')).toHaveAttribute('title', 'light');
   });
 
   describe('Render App with Theme', () => {
     given('todos', () => todoResultState);
 
     context('When theme is Light', () => {
       it('renders light theme css attribute and light toggle', () => {
-        const { getByText, getByTestId } = renderApp({ theme: lightTheme });
+        renderApp({ theme: lightTheme });
 
-        expect(getByText('What are your plans for today?')).toHaveStyle('color: #6A7BA2;');
-        expect(getByTestId('theme-toggle')).toHaveAttribute('title', 'light');
+        expect(screen.getByText('What are your plans for today?')).toHaveStyle('color: #6A7BA2;');
+        expect(screen.getByTestId('theme-toggle')).toHaveAttribute('title', 'light');
       });
     });
 
     context('When theme is Dark', () => {
       it('renders dark theme css attribute and dark toggle', () => {
-        const { getByText, getByTestId } = renderApp({ theme: darkTheme, themState: true });
+        renderApp({ theme: darkTheme, themState: true });
 
-        expect(getByText('What are your plans for today?')).toHaveStyle('color: #FFDFDE;');
-        expect(getByTestId('theme-toggle')).toHaveAttribute('title', 'dark');
+        expect(screen.getByText('What are your plans for today?')).toHaveStyle('color: #FFDFDE;');
+        expect(screen.getByTestId('theme-toggle')).toHaveAttribute('title', 'dark');
       });
     });
   });
@@ -97,27 +97,27 @@ describe('App', () => {
     }));
 
     it('When the filter is ALL', () => {
-      const { container, getByText } = renderApp({});
+      const { container } = renderApp({});
 
-      fireEvent.click(getByText('ALL'));
+      fireEvent.click(screen.getByText('ALL'));
 
       expect(container).toHaveTextContent('some task');
       expect(container).toHaveTextContent('할 일2');
     });
 
     it('When the filter is ACTIVE', () => {
-      const { container, getByText } = renderApp({});
+      const { container } = renderApp({});
 
-      fireEvent.click(getByText('ACTIVE'));
+      fireEvent.click(screen.getByText('ACTIVE'));
 
       expect(container).toHaveTextContent('some task');
       expect(container).not.toHaveTextContent('할 일2');
     });
 
     it('When the filter is COMPLETED', () => {
-      const { container, getByText } = renderApp({});
+      const { container } = renderApp({});
 
-      fireEvent.click(getByText('COMPLETED'));
+      fireEvent.click(screen.getByText('COMPLETED'));
 
       expect(container).not.toHaveTextContent('some task');
       expect(container).toHaveTextContent('할 일2');
@@ -136,24 +136,24 @@ describe('App', () => {
 
     context('Is Sign in Modal', () => {
       it('When you click the "Sign in" button, the Sign in modal is shown.', async () => {
-        const { getByPlaceholderText, getByText } = renderApp({});
+        renderApp({});
 
-        fireEvent.click(getByText('Sign in'));
+        fireEvent.click(screen.getByText('Sign in'));
 
-        expect(getByPlaceholderText('아이디')).not.toBeNull();
-        expect(getByPlaceholderText('비밀번호')).not.toBeNull();
+        expect(screen.getByPlaceholderText('아이디')).not.toBeNull();
+        expect(screen.getByPlaceholderText('비밀번호')).not.toBeNull();
       });
     });
 
     context('Is Sign up Modal', () => {
       it('When you click the "Sing in" button, the Sign in modal is shown.', async () => {
-        const { getByPlaceholderText, getByText } = renderApp({});
+        renderApp({});
 
-        fireEvent.click(getByText('Sign up'));
+        fireEvent.click(screen.getByText('Sign up'));
 
-        expect(getByPlaceholderText('아이디')).not.toBeNull();
-        expect(getByPlaceholderText('비밀번호')).not.toBeNull();
-        expect(getByPlaceholderText('비밀번호 확인')).not.toBeNull();
+        expect(screen.getByPlaceholderText('아이디')).not.toBeNull();
+        expect(screen.getByPlaceholderText('비밀번호')).not.toBeNull();
+        expect(screen.getByPlaceholderText('비밀번호 확인')).not.toBeNull();
       });
     });
   });
@@ -186,12 +186,12 @@ describe('App', () => {
         todos,
       }));
 
-      const { container, getByText } = renderApp({});
+      const { container } = renderApp({});
 
       expect(container).toHaveTextContent('할 일1');
 
       await act(async () => {
-        fireEvent.click(getByText('CLEAR COMPLETED'));
+        fireEvent.click(screen.getByText('CLEAR COMPLETED'));
       });
 
       expect(container).toHaveTextContent('할 일이 없어요!');
@@ -211,18 +211,16 @@ describe('App', () => {
         { placeholder: '비밀번호', value: 'test' },
       ];
 
-      const {
-        container, getByTestId, getByPlaceholderText,
-      } = renderApp(props);
+      const { container } = renderApp(props);
 
       await act(async () => {
         input.forEach(({ placeholder, value }) => {
-          fireEvent.change(getByPlaceholderText(placeholder), { target: { value } });
+          fireEvent.change(screen.getByPlaceholderText(placeholder), { target: { value } });
         });
       });
 
       await act(async () => {
-        fireEvent.submit(getByTestId('auth-submit-button'));
+        fireEvent.submit(screen.getByTestId('auth-submit-button'));
       });
 
       expect(container).toHaveTextContent('Successful Sign in!');
@@ -271,9 +269,9 @@ describe('App', () => {
       it('Render success message "Success in entering To-Do!"', async () => {
         mockPostApi(mockData);
 
-        const { container, getByPlaceholderText } = renderApp({ user: mockUserState });
+        const { container } = renderApp({ user: mockUserState });
 
-        const input = getByPlaceholderText('오늘의 할 일을 입력해주세요!');
+        const input = screen.getByPlaceholderText('오늘의 할 일을 입력해주세요!');
 
         await act(async () => {
           fireEvent.change(input, { target: { value } });
@@ -309,18 +307,16 @@ describe('App', () => {
         { placeholder: '비밀번호 확인', value: 'test' },
       ];
 
-      const {
-        container, getByTestId, getByPlaceholderText,
-      } = renderApp(props);
+      const { container } = renderApp(props);
 
       await act(async () => {
         input.forEach(({ placeholder, value }) => {
-          fireEvent.change(getByPlaceholderText(placeholder), { target: { value } });
+          fireEvent.change(screen.getByPlaceholderText(placeholder), { target: { value } });
         });
       });
 
       await act(async () => {
-        fireEvent.submit(getByTestId('auth-submit-button'));
+        fireEvent.submit(screen.getByTestId('auth-submit-button'));
       });
 
       expect(container).toHaveTextContent('Successful Sign up!');

src/components/auth/AuthInput.jsx

@@ -48,7 +48,7 @@ const authFieldsProperty = {
   },
 };
 
-const AuthInput = ({ inputRef, inputName }) => {
+function AuthInput({ inputRef, inputName }) {
   const { inputType, placeholder, autoComplete } = authFieldsProperty[inputName];
 
   return (
@@ -60,6 +60,6 @@ const AuthInput = ({ inputRef, inputName }) => {
       autoComplete={autoComplete}
     />
   );
-};
+}
 
 export default AuthInput;

src/components/auth/AuthInput.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import AuthInput from './AuthInput';
 
@@ -13,8 +13,8 @@ describe('AuthInput', () => {
   ));
 
   it('renders auth input', () => {
-    const { getByPlaceholderText } = renderAuthInput();
+    renderAuthInput();
 
-    expect(getByPlaceholderText('아이디')).not.toBeNull();
+    expect(screen.getByPlaceholderText('아이디')).not.toBeNull();
   });
 });

src/components/auth/AuthModalForm.jsx

@@ -98,7 +98,7 @@ const SubmitButton = styled.button`
   }
 `;
 
-const AuthModalForm = ({ onSubmit }) => {
+function AuthModalForm({ onSubmit }) {
   const { register, handleSubmit } = useForm();
 
   const { type, visible } = useRecoilValue(authFormStatusAtom);
@@ -145,6 +145,6 @@ const AuthModalForm = ({ onSubmit }) => {
       </AuthModalBoxWrapper>
     </AuthModalFormWrapper>
   );
-};
+}
 
 export default AuthModalForm;

src/components/auth/AuthModalForm.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { RecoilRoot } from 'recoil';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { SnackbarProvider } from 'notistack';
 
@@ -31,11 +31,11 @@ describe('AuthModalForm', () => {
       visible: true,
     }));
     it('renders register contents', () => {
-      const { getByPlaceholderText } = renderAuthModalForm();
+      renderAuthModalForm();
 
-      expect(getByPlaceholderText('아이디')).not.toBeNull();
-      expect(getByPlaceholderText('비밀번호')).not.toBeNull();
-      expect(getByPlaceholderText('비밀번호 확인')).not.toBeNull();
+      expect(screen.getByPlaceholderText('아이디')).not.toBeNull();
+      expect(screen.getByPlaceholderText('비밀번호')).not.toBeNull();
+      expect(screen.getByPlaceholderText('비밀번호 확인')).not.toBeNull();
     });
   });
 
@@ -45,10 +45,10 @@ describe('AuthModalForm', () => {
       visible: true,
     }));
     it('renders register contents', () => {
-      const { getByPlaceholderText } = renderAuthModalForm();
+      renderAuthModalForm();
 
-      expect(getByPlaceholderText('아이디')).not.toBeNull();
-      expect(getByPlaceholderText('비밀번호')).not.toBeNull();
+      expect(screen.getByPlaceholderText('아이디')).not.toBeNull();
+      expect(screen.getByPlaceholderText('비밀번호')).not.toBeNull();
     });
   });
 });

src/components/auth/AuthStatus.jsx

@@ -7,7 +7,7 @@ import { authFormStatusAtom } from '../../recoil/auth';
 import RegisterForm from './RegisterForm';
 import LoginForm from './LoginForm';
 
-const AuthStatus = () => {
+function AuthStatus() {
   const { type, visible } = useRecoilValue(authFormStatusAtom);
 
   if (!visible) {
@@ -23,6 +23,6 @@ const AuthStatus = () => {
   return (
     <LoginForm />
   );
-};
+}
 
 export default AuthStatus;