136 front task 설정 페이지 구현

__test__/pagesTest/SettingPage.test.jsx

@@ -1,48 +1,50 @@
 import React from "react";
-import { Provider } from "react-redux";
-
-import configureStore from "redux-mock-store";
 
 import { render } from "../../jest.setup";
 import SettingPage from "../../src/pages/SettingPage/SettingPage";
 
-const mockStore = configureStore([]);
-
 describe("SettingPage Component", () => {
-	let store;
-
-	beforeEach(() => {
-		store = mockStore({
-			auth: {
-				user: {
-					nickname: "test",
-					email: "test@test.com",
-					imageUrl: "",
+	it("renders without crashing", () => {
+		render(<SettingPage />, {
+			preloadedState: {
+				auth: {
+					user: {
+						nickname: "test",
+						email: "test@test.com",
+						imageUrl: "",
+					},
+				},
+				ui: {
+					openedModal: "",
+				},
+				group: {
+					groupInfo: { groupId: 1, name: "testGroup" },
 				},
-			},
-			ui: {
-				openedModal: "",
 			},
 		});
 	});
 
-	it("renders without crashing", () => {
-		render(
-			<Provider store={store}>
-				<SettingPage />
-			</Provider>,
-		);
-	});
-
 	it("renders all the tabs", () => {
-		const { getByText } = render(
-			<Provider store={store}>
-				<SettingPage />
-			</Provider>,
-		);
+		const { getByRole } = render(<SettingPage />, {
+			preloadedState: {
+				auth: {
+					user: {
+						nickname: "test",
+						email: "test@test.com",
+						imageUrl: "",
+					},
+				},
+				ui: {
+					openedModal: "",
+				},
+				group: {
+					groupInfo: { groupId: 1, name: "testGroup" },
+				},
+			},
+		});
 
-		expect(getByText("프로필 및 계정 관리")).toBeInTheDocument();
-		expect(getByText("공유일정 및 채팅관리")).toBeInTheDocument();
-		expect(getByText("비밀번호 변경")).toBeInTheDocument();
+		expect(getByRole("tab", { name: "profileTab" })).toBeInTheDocument();
+		expect(getByRole("tab", { name: "passwordTab" })).toBeInTheDocument();
+		expect(getByRole("tab", { name: "withdrawalTab" })).toBeInTheDocument();
 	});
 });

jest.setup.js

@@ -8,14 +8,21 @@ import { render as rtlRender } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 
 import { server } from "./__test__/__mocks__/msw/server.js";
-import { store } from "./src/store/index.js";
+import { setupStore } from "./src/store/index.js";
 import lightTheme from "./src/styles/theme.js";
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
-const render = (ui, { ...options } = {}) => {
+export const render = (
+	ui,
+	{
+		preloadedState = {},
+		store = setupStore(preloadedState),
+		...renderOptions
+	} = {},
+) => {
 	const Wrapper = ({ children }) => (
 		<GoogleOAuthProvider clientId="379597382111-vo2ht0r8a3d0ais7v12q7777lu48al1a.apps.googleusercontent.com">
 			<Provider store={store}>
@@ -25,8 +32,7 @@ const render = (ui, { ...options } = {}) => {
 			</Provider>
 		</GoogleOAuthProvider>
 	);
-	return rtlRender(ui, { wrapper: Wrapper, ...options });
+	return { store, ...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }) };
 };
 
 export * from "@testing-library/react";
-export { render };

package.json

@@ -29,6 +29,7 @@
 		"axios": "^1.4.0",
 		"cross-env": "7.0.3",
 		"dotenv": "16.3.1",
+		"eslint": "8.49.0",
 		"eslint-plugin-import": "2.28.0",
 		"framer-motion": "^10.12.14",
 		"jest-transform-stub": "2.0.0",
@@ -63,7 +64,6 @@
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.11",
 		"@vitejs/plugin-react": "^3.1.0",
-		"eslint": "^8.41.0",
 		"eslint-config-airbnb": "^19.0.4",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-prettier": "^4.2.1",