jest 가 작동하지 않는 문제를 해결한다.

- npx jest 입력 시 테스트 코드에서 import 를 사용 할 수 없다는 오류 메세지가 계속 노출됨(참고이미지: https://i.stack.imgur.com/kmWMC.png)
- App 파일에 있는 css 임포트를 제거하니 다른 오류메세지가 찍힘. ReferenceError: document is not defined 라는 에러가 나타나서 해결해보려 시도
- jest.config.js 파일의 설정에 testEnvironment 를 추가하여 해결(참고: testing-library/react-testing-library#422)

Author: 최한울

babel.config.js

@@ -10,4 +10,12 @@ module.exports = {
     ],
     '@babel/preset-react',
   ],
+  plugins: [
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        runtime: 'automatic',
+      },
+    ],
+  ],
 };

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  testEnvironment: "jest-environment-jsdom",
+  setupFilesAfterEnv: [
+    'jest-plugin-context/setup',
+    './jest.setup',
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+};

jest.setup.js

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

package-lock.json

@@ -50,20 +50,23 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.23",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
+    "babel-plugin-syntax-class-properties": "^6.13.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^1.7.0",
     "jest": "^27.0.6",
+    "jest-plugin-context": "^2.9.0",
     "webpack-cli": "^4.7.2"
   }
 }

package.json

@@ -1,23 +1,6 @@
-import React, { useState, useEffect } from 'react';
-
-import './App.css';
+import React from 'react';
 
 function App() {
-  const [appName, setAppName] = useState(null);
-
-  useEffect(() => {
-    fetch('api/group')
-      .then((res) => res.json())
-      .then((data) => setAppName(data.appName));
-  }, []);
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        {appName ? `Hello ${appName}` : 'Hello World'}
-      </header>
-    </div>
-  );
 }
 
 export default App;

src/App.jsx

@@ -1,5 +1,7 @@
 import { render } from '@testing-library/react';
 
+import '@testing-library/jest-dom';
+
 import App from './App';
 
 describe('App', () => {

src/App.test.js

@@ -1,4 +1,7 @@
+const path = require('path');
+
 module.exports = {
+  entry: path.resolve(__dirname, 'src/index.jsx'),
   module: {
     rules: [
       {
@@ -8,4 +11,12 @@ module.exports = {
       },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  devServer: {
+    historyApiFallback: {
+      index: 'index.html',
+    },
+  },
 };