Fixed images/css imports for Jest

client/babel.config.js

 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react']
+  presets: [[
+    '@babel/preset-env',
+    {
+      targets: {
+        esmodules: true
+      }
+    }
+  ], '@babel/preset-react']
 }

client/fileTransformer.ts

+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
+
+module.exports = {
+  process (src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
+  }
+}

client/package.json

@@ -50,6 +50,15 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
-    "setupFilesAfterEnv": ["<rootDir>/setupTests.ts"]
+    "setupFilesAfterEnv": ["<rootDir>/setupTests.ts"],
+    "moduleFileExtensions": ["js", "json", "jsx", "ts", "tsx"],
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/fileTransformer.ts"
+    },
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
   }
 }

client/src/App.tsx

 import React from 'react'
-// import logo from './logo.svg'
-// import './App.css'
+import logo from './logo.svg'
+import './App.css'
 
 function App () {
   return (
     <div className="App">
       <header className="App-header">
-        <img src='{logo}' className="App-logo" alt="logo" />
+        <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>