Merge pull request #145 from Team-INSERT/test/useModal

useModal 테스트 코드 작성

Author: Ubinquitous

.eslintignore

@@ -1,2 +1,4 @@
 jest.config.js
-next.config.js
+jest.setup.js
+next.config.js
+commitlint.config.js

.eslintrc.js

@@ -28,6 +28,8 @@ module.exports = {
     ],
     // 'React' must be in scope when using JSX 에러 지우기(Next.js)
     "react/react-in-jsx-scope": "off",
+    "react/jsx-no-useless-fragment": 0,
+    "react/button-has-type": 0,
     // ts파일에서 tsx구문 허용(Next.js)
     "@typescript-eslint/no-use-before-define": "off",
     "react/jsx-filename-extension": [1, { extensions: [".ts", ".tsx"] }], // should add ".ts" if typescript project

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.sentryclirc

jest.config.js

@@ -1,49 +1,10 @@
-// jest.config.js
-module.exports = {
-  collectCoverage: true,
-  // on node 14.x coverage provider v8 offers good speed and more or less good report
-  coverageProvider: "v8",
-  collectCoverageFrom: [
-    "**/*.{js,jsx,ts,tsx}",
-    "!**/e2e/**",
-    "!**/*.d.ts",
-    "!**/node_modules/**",
-    "!<rootDir>/out/**",
-    "!<rootDir>/.next/**",
-    "!<rootDir>/*.config.js",
-    "!<rootDir>/*.config.ts",
-    "!<rootDir>/*rc.js",
-    "!<rootDir>/coverage/**",
-  ],
-  moduleNameMapper: {
-    // Handle CSS imports (with CSS modules)
-    // https://jestjs.io/docs/webpack#mocking-css-modules
-    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
-
-    // Handle CSS imports (without CSS modules)
-    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
-
-    // Handle image imports
-    // https://jestjs.io/docs/webpack#handling-static-assets
-    "^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i": `<rootDir>/__mocks__/fileMock.js`,
-
-    // Handle module aliases
-    "^@/components/(.*)$": "<rootDir>/components/$1",
-  },
-  // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testPathIgnorePatterns: [
-    "<rootDir>/node_modules/",
-    "<rootDir>/.next/",
-    "<rootDir>/e2e/",
-  ],
-  transform: {
-    // Use babel-jest to transpile tests with the next/babel preset
-    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
-    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
-  },
-  transformIgnorePatterns: [
-    "/node_modules/",
-    "^.+\\.module\\.(css|sass|scss)$",
-  ],
+const nextJest = require("next/jest");
+const createJestConfig = nextJest({
+  dir: "./",
+});
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
 };
+module.exports = createJestConfig(customJestConfig);

next.config.js

@@ -12,3 +12,46 @@ const nextConfig = {
 };
 
 module.exports = nextConfig;
+
+
+// Injected content via Sentry wizard below
+
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(
+  module.exports,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    // Suppresses source map uploading logs during build
+    silent: true,
+    org: "team-insert-leader",
+    project: "javascript-nextjs",
+  },
+  {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Transpiles SDK to be compatible with IE11 (increases bundle size)
+    transpileClientSDK: true,
+
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors.
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+  }
+);

package.json

@@ -7,11 +7,15 @@
     "build": "next lint && next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "yarn && yarn build && yarn lint && yarn install --immutable --immutable-cache --check-cache && npx playwright install --with-deps && npx playwright test"
+    "test": "jest --watch",
+    "test:ci": "jest --ci"
   },
   "dependencies": {
     "@playwright/test": "^1.29.1",
+    "@sentry/nextjs": "^7.90.0",
     "@tanstack/react-query": "^4.35.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@tinymce/tinymce-react": "^4.3.0",
     "@types/d3": "^7.4.0",
     "@types/node": "18.16.19",
@@ -36,7 +40,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "graphql": "^16.8.0",
     "graphql-request": "^6.1.0",
-    "jest": "^29.3.1",
+    "jest": "^29.7.0",
+    "jest-dom": "^4.0.0",
     "jotai": "^2.5.1",
     "jwt-decode": "^3.1.2",
     "msw": "^1.2.3",
@@ -87,7 +92,7 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.2",
-    "jest-environment-jsdom": "^29.3.1"
+    "jest-environment-jsdom": "^29.7.0"
   },
   "config": {
     "commitizen": {

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://d9b95ec831a783292206973ebf392318@o4506432587563008.ingest.sentry.io/4506432597262336",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    new Sentry.Replay({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://d9b95ec831a783292206973ebf392318@o4506432587563008.ingest.sentry.io/4506432597262336",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://d9b95ec831a783292206973ebf392318@o4506432587563008.ingest.sentry.io/4506432597262336",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

src/@modal/hooks/useModal.spec.tsx

@@ -0,0 +1,38 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import useModal from "./useModal";
+
+jest.mock("./useModal");
+
+const TestComponent = () => {
+  const { openModal, closeModal } = useModal();
+  return (
+    <div>
+      <button onClick={() => openModal({ component: <></> })}>Open</button>
+      <button onClick={closeModal}>Close</button>
+    </div>
+  );
+};
+
+describe("useModal", () => {
+  const mockUseModal = useModal as jest.MockedFunction<typeof useModal>;
+  mockUseModal.mockReturnValue({
+    openModal: jest.fn(),
+    closeModal: jest.fn(),
+    visible: false,
+  });
+
+  it("openModal이 호출되면 화면에 모달이 render 되어야 한다", async () => {
+    render(<TestComponent />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Open" }));
+    expect(mockUseModal().openModal).toHaveBeenCalled();
+    expect(document.activeElement).toBeInstanceOf(HTMLElement);
+  });
+
+  it("closeModal이 호출되면 화면에 render된 모달이 unmount 되어야 한다.", () => {
+    render(<TestComponent />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(mockUseModal().closeModal).toHaveBeenCalled();
+  });
+});

tests/example.spec.ts

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["jest"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -30,7 +31,9 @@
     "**/*.tsx",
     "tailwind.config.js",
     ".eslintrc.js",
-    ".next/types/**/*.ts"
-, "public/mockServiceWorker.js"  ],
+    ".next/types/**/*.ts",
+    "public/mockServiceWorker.js",
+    "jest.setup.js"
+  ],
   "exclude": ["node_modules"]
 }