feat: 개인일정 등록 (#30)

__test__/__mocks__/msw/handlers.js

@@ -0,0 +1,12 @@
+import { rest } from "msw";
+
+const BASE_URL = "http://localhost:8000";
+
+export const handlers = [
+	rest.post(`${BASE_URL}/api/user/calendar`, (req, res, ctx) => {
+		return res(
+			ctx.status(201),
+			ctx.json({ message: "Successfully create user schedule" }),
+		);
+	}),
+];

__test__/__mocks__/msw/server.js

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers.js";
+
+export const server = setupServer(...handlers);

__test__/pagesTest/LoginPage.test.jsx

@@ -2,41 +2,29 @@
  * @jest-environment jsdom
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { render } from "../../jest.setup.js";
 import "@testing-library/jest-dom/extend-expect";
-import { Provider } from "react-redux";
-import { BrowserRouter } from "react-router-dom";
-import { GoogleOAuthProvider } from "@react-oauth/google";
-import { store } from "../../src/store/store";
 import LoginPage from "../../src/pages/LoginPage";
 
-const renderWithReduxAndRouter = (component) =>
-	render(
-		<Provider store={store}>
-			<GoogleOAuthProvider clientId="379597382111-vo2ht0r8a3d0ais7v12q7777lu48al1a.apps.googleusercontent.com">
-				<BrowserRouter>{component}</BrowserRouter>
-			</GoogleOAuthProvider>
-		</Provider>,
-	);
-
 describe("LoginPage", () => {
 	// 로그인 페이지 랜더링 테스트
 	test("renders LoginPage without crashing", () => {
-		renderWithReduxAndRouter(<LoginPage />);
+		render(<LoginPage />);
 		const loginHeader = screen.getByText(/LOGIN/i);
 		expect(loginHeader).toBeInTheDocument();
 	});
 
 	// 네이버로그인 버튼이 있는지 테스트
 	test("renders Google login component", () => {
-		renderWithReduxAndRouter(<LoginPage />);
+		render(<LoginPage />);
 		const googleLoginElement = screen.getByTestId("google-login");
 		expect(googleLoginElement).toBeInTheDocument();
 	});
 
 	// 구글로그인 버튼이 있는지 테스트
 	test("renders Naver login component", () => {
-		renderWithReduxAndRouter(<LoginPage />);
+		render(<LoginPage />);
 		const naverLoginElement = screen.getByTestId("naver-login");
 		expect(naverLoginElement).toBeInTheDocument();
 	});

__test__/pagesTest/PersonalSchedulePage.test.jsx

@@ -2,40 +2,24 @@
  * @jest-environment jsdom
  */
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { screen, fireEvent } from "@testing-library/react";
+import { render } from "../../jest.setup.js";
 import "@testing-library/jest-dom";
-import { Provider } from "react-redux";
-import { configureStore } from "@reduxjs/toolkit";
-import { BrowserRouter } from "react-router-dom";
-import userSlice from "../../src/store/user/user-slice";
 import PersonalSchedulePage from "../../src/pages/PersonalSchedulePage";
 
 jest.mock("@daypilot/daypilot-lite-react");
 
-const store = configureStore({
-	reducer: {
-		user: userSlice,
-	},
-});
-
-const renderWithRedux = (component) =>
-	render(
-		<Provider store={store}>
-			<BrowserRouter>{component}</BrowserRouter>
-		</Provider>,
-	);
-
 describe("PersonalSchedulePage", () => {
-	//   PersonalSchedulePage 페이지 랜더링 테스트
+	// PersonalSchedulePage 페이지 랜더링 테스트
 	test("renders PersonalSchedulePage without crashing", () => {
-		renderWithRedux(<PersonalSchedulePage />);
+		render(<PersonalSchedulePage />);
 		const mainContainer = screen.getByRole("main");
 		expect(mainContainer).toBeInTheDocument();
 	});
 
 	// 캘린더 랜더링 테스트
 	test("renders Calendar component", () => {
-		renderWithRedux(<PersonalSchedulePage />);
+		render(<PersonalSchedulePage />);
 
 		// Check if the "월간" button is rendered
 		const monthlyButton = screen.getByText(/월간/i);
@@ -48,21 +32,21 @@ describe("PersonalSchedulePage", () => {
 
 	// 헤더 랜더링 테스트
 	test("renders Header component", () => {
-		renderWithRedux(<PersonalSchedulePage />);
+		render(<PersonalSchedulePage />);
 		const headerElement = screen.getByRole("banner");
 		expect(headerElement).toBeInTheDocument();
 	});
 
-	//  PersonalTodoList 랜더링 테스트
+	// PersonalTodoList 랜더링 테스트
 	test("renders PersonalTodoList component", () => {
-		renderWithRedux(<PersonalSchedulePage />);
+		render(<PersonalSchedulePage />);
 		const personalTodoListElement = screen.getByText(/오늘의 할 일/i);
 		expect(personalTodoListElement).toBeInTheDocument();
 	});
 
-	//  Modal 랜더링 테스트
+	// Modal 랜더링 테스트
 	test("renders Modal component", () => {
-		renderWithRedux(<PersonalSchedulePage />);
+		render(<PersonalSchedulePage />);
 		expect(screen.queryByTestId("modal")).toBeNull();
 
 		const addEventButton = screen.getByText(/일정추가/i);

__test__/pagesTest/SignUpPage.test.jsx

@@ -2,28 +2,10 @@
  * @jest-environment jsdom
  */
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "../../jest.setup.js";
 import "@testing-library/jest-dom";
-import { Provider } from "react-redux";
-import { configureStore } from "@reduxjs/toolkit";
-import { BrowserRouter } from "react-router-dom";
-import userSlice from "../../src/store/user/user-slice";
 import SignUpPage from "../../src/pages/SignUpPage";
 
-const store = configureStore({
-	reducer: {
-		user: userSlice,
-	},
-});
-
-const renderWithRedux = (component) =>
-	render(
-		<Provider store={store}>
-			<BrowserRouter>{component}</BrowserRouter>
-		</Provider>,
-	);
-
-// 회원가입 페이지 랜더링 테스트
 test("renders SignUpPage without crashing", () => {
-	renderWithRedux(<SignUpPage />);
+	render(<SignUpPage />);
 });

__test__/reduxTest/scheduleSlice.test.js

@@ -0,0 +1,58 @@
+import { rest } from "msw";
+import { server } from "../__mocks__/msw/server.js";
+
+import { store } from "../../src/store/index.js";
+import { createSchedule } from "../../src/features/schedule/schedule-service.js";
+
+const mockSchedule = {
+	title: "Test title",
+	details: "Test details",
+	startDate: "2023-06-04",
+	endDate: "2023-06-20",
+	startTime: "10:00",
+	endTime: "11:00",
+	repeat: "None",
+	notification: "None",
+};
+
+describe("schedule slice", () => {
+	beforeAll(() => {
+		server.use(
+			rest.post("/api/user/calendar", (req, res, ctx) => {
+				return res(ctx.status(500));
+			}),
+		);
+	});
+
+	it("handles createSchedule failure", async () => {
+		const initialScheduleState = {
+			schedule: [],
+			isLoading: false,
+		};
+
+		expect(store.getState().schedule).toEqual(initialScheduleState);
+
+		server.use(
+			rest.post("/api/user/calendar", (req, res, ctx) => {
+				return res(ctx.status(500));
+			}),
+		);
+
+		await store.dispatch(createSchedule(mockSchedule));
+
+		expect(store.getState().schedule.isLoading).toBe(false);
+	});
+
+	it("handles createSchedule success", async () => {
+		const initialScheduleState = {
+			schedule: [],
+			isLoading: false,
+		};
+
+		expect(store.getState().schedule).toEqual(initialScheduleState);
+
+		await store.dispatch(createSchedule(mockSchedule));
+
+		expect(store.getState().schedule.isLoading).toBe(false);
+	});
+});

jest.config.cjs

@@ -1,30 +1,19 @@
-// {
-//     "testEnvironment": "jsdom",
-//     "transform": {
-//       "^.+\\.jsx?$": "babel-jest"
-//     },
-//     "transformIgnorePatterns": [
-//       "/node_modules/(?!@emotion/react|@emotion/styled|@react-oauth/google|react-icons|react-modal|react-toastify|styled-components)"
-//     ],
-//     "setupFilesAfterEnv": [
-//       "<rootDir>/jest.setup.js"
-//     ],
-//     "moduleNameMapper": {
-//       "react-calendar/dist/Calendar.css": "<rootDir>/__mocks__/mock.js",
-//       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
-//     }
-//   }
-
 module.exports = {
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-  },
-  transformIgnorePatterns: [
-    '/node_modules/(?!@emotion/react|@emotion/styled|@react-oauth/google|react-icons|react-modal|react-toastify|styled-components)',
-  ],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  moduleNameMapper: {
-    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
-  },
+	testEnvironment: "jsdom",
+	transform: {
+		"^.+\\.jsx?$": "babel-jest",
+	},
+	transformIgnorePatterns: [
+		"/node_modules/(?!@emotion/react|@emotion/styled|@react-oauth/google|react-icons|react-modal|react-toastify|styled-components)",
+	],
+	setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+	moduleNameMapper: {
+		"^@/(.*)$": "<rootDir>/src/$1",
+		"^@components/(.*)$": "<rootDir>/src/components/$1",
+		"^@pages/(.*)$": "<rootDir>/src/pages/$1",
+		"^@features/(.*)$": "<rootDir>/src/features/$1",
+		"^@store/(.*)$": "<rootDir>/src/store/$1",
+		"^@utils/(.*)$": "<rootDir>/src/utils/$1",
+		"\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
+	},
 };

jest.setup.js

@@ -1,9 +1,27 @@
-window.matchMedia =
-  window.matchMedia ||
-  function () {
-    return {
-      matches: false,
-      addListener: function () {},
-      removeListener: function () {},
-    };
-  };
+import "@testing-library/jest-dom/extend-expect";
+import { server } from "./__test__/__mocks__/msw/server.js";
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+import React from "react";
+import { render as rtlRender } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { store } from "./src/store/index.js";
+
+const render = (ui, { ...options } = {}) => {
+	const Wrapper = ({ children }) => (
+		<GoogleOAuthProvider clientId="379597382111-vo2ht0r8a3d0ais7v12q7777lu48al1a.apps.googleusercontent.com">
+			<Provider store={store}>
+				<BrowserRouter>{children}</BrowserRouter>
+			</Provider>
+		</GoogleOAuthProvider>
+	);
+	return rtlRender(ui, { wrapper: Wrapper, ...options });
+};
+
+export * from "@testing-library/react";
+export { render };