dev: jest 설정

.babelrc

@@ -10,7 +10,8 @@
           "importSource": "@emotion/react"
         }
       }
-    ]
+    ],
+    "@babel/preset-env"
   ],
   "plugins": [
     [

.eslintrc.json

@@ -70,6 +70,7 @@
   "env": {
     "browser": true,
     "es2021": true,
-    "commonjs": true
+    "commonjs": true,
+    "jest": true
   }
 }

.husky/pre-commit

@@ -4,3 +4,4 @@
 yarn lint
 yarn prettier
 yarn lint:css
+yarn test:ci

jest.comfig.js

@@ -0,0 +1,23 @@
+module.exports = {
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  collectCoverageFrom: ['**/*.{ts,tsx}', '!**/*.d.ts', '!**/node_modules/**'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['jest-plugin-context/setup', './jest.setup.js'],
+  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  transformIgnorePatterns: ['/node_modules/'],
+  moduleNameMapper: {
+    '\\.svg': '<rootDir>/src/test/__mocks__/svgrMock.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      require.resolve('./src/test/__mocks__/fileMock.js'),
+    '^@src(.*)$': '<rootDir>/src$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.jest.json',
+    },
+  },
+};

jest.setup.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint",
     "prettier": "prettier --write .",
     "lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test": "jest --watchAll --coverage",
+    "test:ci": "jest --ci"
   },
   "dependencies": {
     "@emotion/react": "^11.9.0",
@@ -19,13 +21,21 @@
     "react-dom": "18.1.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.18.2",
     "@emotion/babel-plugin": "^11.9.2",
     "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.0",
+    "@types/jest": "^28.1.1",
     "@types/node": "17.0.38",
     "@types/react": "18.0.10",
     "@types/react-dom": "18.0.5",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
+    "babel-jest": "^28.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^8.16.0",
     "eslint-config-next": "12.1.6",
@@ -37,14 +47,20 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^8.0.1",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "node-mocks-http": "^1.11.0",
     "postcss-html": "^1.4.1",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.6.2",
+    "react-test-renderer": "^18.1.0",
     "stylelint": "^14.8.5",
     "stylelint-config-concentric-order": "^5.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "ts-jest": "^28.0.4",
+    "ts-loader": "^9.3.0",
     "typescript": "4.7.2"
   }
 }

src/test/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = '/test-file-stub';

src/test/__mocks__/svgrMock.js

@@ -0,0 +1 @@
+module.exports = '/IconMock';

tsconfig.jest.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

tsconfig.json

@@ -20,6 +20,6 @@
       "@src/*": ["src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/components/Link/Link.testtjs"],
   "exclude": ["node_modules"]
 }