add jest and enzyme with typescript

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    "@babel/preset-flow",
+    "@babel/preset-react",
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    "@babel/plugin-syntax-dynamic-import",
+  ],
+};

jest.config.js

@@ -0,0 +1,6 @@
+const {defaults} = require('jest-config');
+module.exports = {
+  // ...
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+  // ...
+};

package.json

@@ -5,9 +5,6 @@
   "dependencies": {
     "@material-ui/core": "^4.9.14",
     "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "@types/material-ui": "^0.21.7",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
@@ -32,7 +29,9 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -49,5 +48,34 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-flow": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@types/jest": "^26.0.10",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.5.0",
+    "jest": "^26.4.0"
+  },
+  "jest": {
+    "verbose": true,
+    "clearMocks": true,
+    "collectCoverage": true,
+    "snapshotSerializers": [
+      "./node_modules/enzyme-to-json/serializer"
+    ],
+    "transform": {
+      "^.+\\.(js|ts)$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js",
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
   }
 }

src/App.test.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import App from './App';
+
+test('should pass tests with tsx', () => {
+  expect(23).toBe(23);
+});

src/App.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './App.css';
 import ProfilePage from './features/profile';
 import { Collections } from './features/collections';
 import { LoginPage } from './features/loginization/login';

src/features/loginization/login.tsx

@@ -19,8 +19,6 @@ const initialValues = {
     password: '',
 };
 
-
-
 export function LoginPage() {
     const auth = useAuth();
     const { enqueueSnackbar } = useSnackbar();

src/setupTests.js

@@ -1,5 +1,10 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() });
+
+// Fail tests on any warning
+console.error = message => {
+    throw new Error(message);
+};