refactor: js -> ts 변경

fixtures/recoil-atom-state.js → fixtures/recoil-atom-state.ts

@@ -9,7 +9,7 @@ export const authResultState = {
   authSuccess: null,
 };
 
-export const userState = {
+export const userState: { user: null | string; checkError: any } = {
   user: null,
   checkError: null,
 };

package.json

@@ -47,7 +47,7 @@
     "react-toggle": "^4.1.2",
     "react-tooltip": "^4.2.13",
     "react-use": "^17.1.1",
-    "recoil": "^0.3.1",
+    "recoil": "0.7.7",
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
@@ -59,6 +59,7 @@
     "@testing-library/react": "^11.2.3",
     "@types/facepaint": "1.2.5",
     "@types/jest": "^26.0.20",
+    "@types/jest-plugin-context": "2.9.7",
     "@types/lodash": "4.14.202",
     "@types/react-dom": "18.2.18",
     "@types/react-responsive": "8.0.8",

src/App.test.jsx → src/App.test.tsx

@@ -20,9 +20,9 @@ import { todoResultState, userState, authState } from '../fixtures/recoil-atom-s
 import App from './App';
 import InjectTestingRecoilState from './components/common/InjectTestingRecoilState';
 
-const mockGetApi = (response) => mockAxios.get.mockResolvedValueOnce(response);
+const mockGetApi = (response: any) => (mockAxios.get as jest.Mock).mockResolvedValueOnce(response);
 
-const mockPostApi = (response) => mockAxios.post.mockResolvedValueOnce(response);
+const mockPostApi = (response: any) => (mockAxios.post as jest.Mock).mockResolvedValueOnce(response);
 
 jest.mock('./services/storage');
 describe('App', () => {
@@ -233,7 +233,7 @@ describe('App', () => {
         response = renderApp({ user: mockUserState });
       });
 
-      expect(response.container).toHaveTextContent('할 일2');
+      expect((response as any).container).toHaveTextContent('할 일2');
     });
 
     describe('when logged in have success status', () => {
@@ -242,7 +242,7 @@ describe('App', () => {
       };
 
       beforeEach(() => {
-        loadItem.mockImplementation(() => user);
+        (loadItem as jest.Mock).mockImplementation(() => user);
       });
 
       it('has the user session value, so the Sign out button is visible.', async () => {
@@ -253,7 +253,7 @@ describe('App', () => {
           response = renderApp({ user: mockUserState });
         });
 
-        expect(response.container).toHaveTextContent('Sign out');
+        expect((response as any).container).toHaveTextContent('Sign out');
       });
     });
 

src/__mocks__/axios.js → src/__mocks__/axios.ts

@@ -1,5 +1,5 @@
 const mockAxios = jest.genMockFromModule('axios');
 
-mockAxios.create.mockReturnThis();
+(mockAxios as any).create.mockReturnThis();
 
 export default mockAxios;

src/components/auth/AuthModalForm.test.jsx → src/components/auth/AuthModalForm.test.tsx

@@ -10,6 +10,8 @@ import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 import AuthModalForm from './AuthModalForm';
 
 describe('AuthModalForm', () => {
+  const handleSubmit = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -20,7 +22,7 @@ describe('AuthModalForm', () => {
         <InjectTestingRecoilState
           auth={given.auth}
         />
-        <AuthModalForm />
+        <AuthModalForm onSubmit={handleSubmit} />
       </SnackbarProvider>
     </RecoilRoot>
   ));

src/components/auth/AuthStatus.test.jsx → src/components/auth/AuthStatus.test.tsx

@@ -56,8 +56,8 @@ describe('AuthStatus', () => {
         ];
 
         it('when sign up is successful, renders Sign in modal', async () => {
-          mockAxios.post.mockResolvedValueOnce({ data: { access_token: mockToken } });
-          mockAxios.get.mockRejectedValueOnce({ response: { status: 403 } });
+          (mockAxios.post as jest.Mock).mockResolvedValueOnce({ data: { access_token: mockToken } });
+          (mockAxios.get as jest.Mock).mockRejectedValueOnce({ response: { status: 403 } });
 
           const { container } = renderAuthStatus();
 
@@ -94,8 +94,8 @@ describe('AuthStatus', () => {
         ];
 
         it('when login is successful, renders success message', async () => {
-          mockAxios.post.mockResolvedValueOnce({ data: { access_token: mockToken } });
-          mockAxios.get.mockRejectedValueOnce({ response: { status: 403 } });
+          (mockAxios.post as jest.Mock).mockResolvedValueOnce({ data: { access_token: mockToken } });
+          (mockAxios.get as jest.Mock).mockRejectedValueOnce({ response: { status: 403 } });
 
           const { container } = renderAuthStatus();
 

src/components/auth/LoginForm.test.jsx → src/components/auth/LoginForm.test.tsx

@@ -58,8 +58,8 @@ describe('LoginForm', () => {
           },
         };
 
-        mockAxios.post.mockRejectedValueOnce(mockData);
-        mockAxios.get.mockResolvedValueOnce(mockData);
+        (mockAxios.post as jest.Mock).mockRejectedValueOnce(mockData);
+        (mockAxios.get as jest.Mock).mockResolvedValueOnce(mockData);
 
         const { container } = renderLoginForm();
 

src/components/auth/RegisterForm.test.jsx → src/components/auth/RegisterForm.test.tsx

@@ -76,7 +76,7 @@ describe('RegisterForm', () => {
           },
         };
 
-        mockAxios.post.mockRejectedValueOnce(mockData);
+        (mockAxios.post as jest.Mock).mockRejectedValueOnce(mockData);
 
         renderRegisterForm();
 

src/components/common/AuthStatusSnackbar.test.jsx → src/components/common/AuthStatusSnackbar.test.tsx

@@ -12,7 +12,7 @@ import AuthStatusSnackbar from './AuthStatusSnackbar';
 import InjectTestingRecoilState from './InjectTestingRecoilState';
 
 describe('AuthStatusSnackbar', () => {
-  const renderAuthStatusSnackbar = (state) => render((
+  const renderAuthStatusSnackbar = (state?: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         user={given.user}
@@ -24,7 +24,7 @@ describe('AuthStatusSnackbar', () => {
     </RecoilRoot>
   ));
 
-  const setAuthState = (state) => ({
+  const setAuthState = (state: any) => ({
     ...authResultState,
     ...state,
   });

src/components/common/InjectTestingRecoilState.jsx → src/components/common/InjectTestingRecoilState.tsx

@@ -29,10 +29,10 @@ function InjectTestingRecoilState({
   const setThemeState = useSetRecoilState(themeModeAtom);
 
   useEffect(() => {
-    setUserState(user);
-    setAuthState(auth);
+    setUserState(user as any);
+    setAuthState(auth as any);
     setTodosState(todos);
-    setFilterState(filter);
+    setFilterState(filter as any);
     setAuthResultState(authResult);
     setLoadingState(isLoading);
     setThemeState(theme);

src/components/common/TodoStatusSnackbar.test.jsx → src/components/common/TodoStatusSnackbar.test.tsx

@@ -12,7 +12,7 @@ import TodoStatusSnackbar from './TodoStatusSnackbar';
 import InjectTestingRecoilState from './InjectTestingRecoilState';
 
 describe('TodoStatusSnackbar', () => {
-  const renderTodoStatusSnackbar = (state) => render((
+  const renderTodoStatusSnackbar = (state: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         todos={state}
@@ -23,7 +23,7 @@ describe('TodoStatusSnackbar', () => {
     </RecoilRoot>
   ));
 
-  const setTodoState = (state) => ({
+  const setTodoState = (state: any) => ({
     ...todoResultState,
     ...state,
   });

src/components/common/ToggleThemeButton.test.jsx → src/components/common/ToggleThemeButton.test.tsx

@@ -8,7 +8,7 @@ import ToggleThemeButton from './ToggleThemeButton';
 import InjectTestingRecoilState from './InjectTestingRecoilState';
 
 describe('ToggleThemeButton', () => {
-  const renderToggleThemeButton = (theme) => render((
+  const renderToggleThemeButton = (theme: boolean) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         theme={theme}

src/components/info-bar/TodoClearButton.test.jsx → src/components/info-bar/TodoClearButton.test.tsx

@@ -46,7 +46,7 @@ describe('TodoClearButton', () => {
       };
 
       it("When todo delete failure, Doesn't have disabled attribute", async () => {
-        mockAxios.delete.mockRejectedValueOnce(error);
+        (mockAxios.delete as jest.Mock).mockRejectedValueOnce(error);
 
         renderTodoClearButton();
 

src/components/info-bar/TodoFilterButton.test.jsx → src/components/info-bar/TodoFilterButton.test.tsx

@@ -5,9 +5,10 @@ import { RecoilRoot } from 'recoil';
 import { render } from '@testing-library/react';
 
 import TodoFilterButton from './TodoFilterButton';
+import { FilterType } from 'src/recoil/todos/atom';
 
 describe('TodoFilterButton', () => {
-  const renderTodoFilterButton = (type) => render((
+  const renderTodoFilterButton = (type: FilterType) => render((
     <RecoilRoot>
       <TodoFilterButton
         type={type}
@@ -16,7 +17,7 @@ describe('TodoFilterButton', () => {
   ));
 
   it('render filter button', () => {
-    const type = 'All';
+    const type = 'ALL';
 
     const { container } = renderTodoFilterButton(type);
 

src/components/info-bar/TodoStats.test.jsx → src/components/info-bar/TodoStats.test.tsx

@@ -10,7 +10,7 @@ import TodoStats from './TodoStats';
 import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 
 describe('TodoStats', () => {
-  const renderTodoStats = (state) => render((
+  const renderTodoStats = (state: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         todos={state}

src/components/info-bar/TodoSubInfo.test.jsx → src/components/info-bar/TodoSubInfo.test.tsx

@@ -10,7 +10,7 @@ import TodoSubInfo from './TodoSubInfo';
 import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 
 describe('TodoSubInfo', () => {
-  const renderTodoSubInfo = (state) => render((
+  const renderTodoSubInfo = (state: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         todos={state}

src/components/input/TodoInput.test.jsx → src/components/input/TodoInput.test.tsx

@@ -49,7 +49,7 @@ describe('TodoInput', () => {
             },
           };
 
-          mockAxios.post.mockRejectedValueOnce(mockError);
+          (mockAxios.post as jest.Mock).mockRejectedValueOnce(mockError);
 
           renderTodoInput();
           const input = screen.getByPlaceholderText(INPUT);

src/components/todo/EditShowTool.test.jsx → src/components/todo/EditShowTool.test.tsx

@@ -11,7 +11,7 @@ describe('EditShowTool', () => {
     jest.clearAllMocks();
   });
 
-  const renderEditShowTool = ({ isMobile }) => render((
+  const renderEditShowTool = ({ isMobile }: { isMobile: boolean; }) => render((
     <EditShowTool
       id="1"
       onShowEdit={handleClick}

src/components/todo/EmptyStatus.test.jsx → src/components/todo/EmptyStatus.test.tsx

@@ -8,7 +8,7 @@ import EmptyStatus from './EmptyStatus';
 import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 
 describe('EmptyStatus', () => {
-  const renderEmptyStatus = (filter) => render((
+  const renderEmptyStatus = (filter: string) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         filter={filter}

src/components/todo/TodoItem.test.jsx → src/components/todo/TodoItem.test.tsx

@@ -11,7 +11,7 @@ import TodoItem from './TodoItem';
 import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 
 describe('TodoItem', () => {
-  const renderTodoItem = (state) => render((
+  const renderTodoItem = (state: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         todos={given.todos}
@@ -80,7 +80,7 @@ describe('TodoItem', () => {
     };
 
     describe('Fail todo delete', () => {
-      mockAxios.delete.mockRejectedValueOnce(error);
+      (mockAxios.delete as jest.Mock).mockRejectedValueOnce(error);
 
       it('The to-do should not be deleted.', async () => {
         const { container } = renderTodoItem(state);
@@ -95,7 +95,7 @@ describe('TodoItem', () => {
 
     describe('Fail todo update', () => {
       beforeEach(() => {
-        mockAxios.patch.mockRejectedValueOnce(error);
+        (mockAxios.patch as jest.Mock).mockRejectedValueOnce(error);
       });
 
       it('The to-do should not be updated, the style has not changed. With Checkbox', async () => {

src/components/todo/TodoItemView.test.jsx → src/components/todo/TodoItemView.test.tsx

@@ -5,6 +5,7 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import TodoItemView from './TodoItemView';
+import { Todo } from 'src/recoil/todos/atom';
 
 describe('TodoItemView', () => {
   const handleRemove = jest.fn();
@@ -15,7 +16,7 @@ describe('TodoItemView', () => {
     jest.clearAllMocks();
   });
 
-  const renderTodoItemView = ({ item, width }) => render((
+  const renderTodoItemView = ({ item, width }: { item: any; width?: string | number}) => render((
     <ResponsiveContext.Provider value={{ width }}>
       <TodoItemView
         item={item}
@@ -26,7 +27,7 @@ describe('TodoItemView', () => {
     </ResponsiveContext.Provider>
   ));
 
-  const initialState = (width) => ({
+  const initialState = (width: string | number) => ({
     item: {
       id: '1',
       task: 'some task',

src/components/todo/TodoList.test.jsx → src/components/todo/TodoList.test.tsx

@@ -24,9 +24,9 @@ describe('TodoList', () => {
     </RecoilRoot>
   ));
 
-  const mockGetApi = (data) => mockAxios.get.mockRejectedValueOnce(data);
+  const mockGetApi = (data: any) => (mockAxios.get as jest.Mock).mockRejectedValueOnce(data);
 
-  const mockPatchApi = (data) => mockAxios.patch.mockResolvedValueOnce({
+  const mockPatchApi = (data: any) => (mockAxios.patch as jest.Mock).mockResolvedValueOnce({
     data,
   });
 
@@ -132,7 +132,7 @@ describe('TodoList', () => {
     });
 
     describe('When the edit input loses focus', () => {
-      const setTodos = (task) => ([{
+      const setTodos = (task: string) => ([{
         _id: '1',
         task,
         isComplete: true,
@@ -232,7 +232,7 @@ describe('TodoList', () => {
         response = renderTodoList('ALL', { user: 'test', checkError: null });
       });
 
-      expect(response.container).toHaveTextContent('할 일이 없어요!');
+      expect((response as any).container).toHaveTextContent('할 일이 없어요!');
     });
   });
 });

src/components/user-info/AuthButton.test.jsx → src/components/user-info/AuthButton.test.tsx

@@ -11,7 +11,7 @@ describe('AuthButton', () => {
     handleClick.mockClear();
   });
 
-  const renderAuthButton = (type) => render((
+  const renderAuthButton = (type: string) => render((
     <AuthButton
       type={type}
       onClick={handleClick}