feat(testing): Adds unit testing via RTL and jest

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/proposal-class-properties",
+    "@babel/proposal-object-rest-spread"
+  ]
+}

.eslintrc.yml

@@ -2,10 +2,18 @@ env:
   browser: true
   es2021: true
   node: true
+  jest: true
 extends:
   - 'eslint:recommended'
   - 'plugin:react/recommended'
   - 'plugin:@typescript-eslint/recommended'
+  - 'prettier'
+  - 'jest-dom'
+  - 'testing-library'
+  - 'plugin:testing-library/recommended'
+  - 'plugin:testing-library/react'
+  - 'plugin:jest-dom/recommended'
+
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaFeatures:
@@ -16,16 +24,12 @@ plugins:
   - react
   - '@typescript-eslint'
 rules:
-  indent:
-    - error
-    - tab
-  linebreak-style:
-    - error
-    - unix
-  quotes:
-    - error
-    - single
-  semi:
-    - error
-    - always
   '@typescript-eslint/ban-ts-comment': off
+  'jest-dom/prefer-checked': 'error'
+  'jest-dom/prefer-enabled-disabled': 'error'
+  'jest-dom/prefer-required': 'error'
+  'jest-dom/prefer-to-have-attribute': 'error'
+  'prettier/prettier': error
+  'testing-library/await-async-query': 'error'
+  'testing-library/no-await-sync-query': 'error'
+  'testing-library/no-debug': 'warn'

jest.config.js

@@ -0,0 +1,10 @@
+const { defaults } = require('jest-config');
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/__test__/config/jest.setup.ts'],
+
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+  testPathIgnorePatterns: ['/node_modules/', '/public/', '/dist/'],
+};

package.json

@@ -22,7 +22,9 @@
     "dev": "electron-webpack dev",
     "compile": "electron-webpack",
     "dist": "yarn compile && electron-builder --win --x64",
-    "publish": "yarn compile && electron-builder --win --x64 --publish always"
+    "publish": "yarn compile && electron-builder --win --x64 --publish always",
+    "test": "jest -c jest.config.js",
+    "test:watch": "jest -c jest.config.js --watch"
   },
   "dependencies": {
     "ajv": "^6.12.6",
@@ -47,25 +49,47 @@
     "ts-interface-checker": "^0.1.13"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.7",
+    "@testing-library/dom": "^7.29.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
     "@types/color": "^3.0.1",
     "@types/cross-spawn": "^6.0.2",
+    "@types/jest": "^26.0.19",
     "@types/js-yaml": "^3.12.5",
     "@types/node": "12",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@types/simple-peer": "^9.6.1",
     "@types/socket.io-client": "^1.4.34",
+    "@types/testing-library__jest-dom": "^5.9.5",
+    "@types/testing-library__react": "^10.2.0",
     "@types/webpack-env": "^1.15.3",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.9.1",
+    "babel-jest": "^26.6.3",
     "electron": "9.3.3",
     "electron-builder": "^22.9.1",
     "electron-webpack": "^2.8.2",
     "electron-webpack-ts": "^4.0.1",
     "eslint": "^7.15.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-jest-dom": "^3.6.4",
+    "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-testing-library": "^3.10.1",
+    "jest": "^26.6.3",
+    "jsdom": "^16.4.0",
+    "prettier": "^2.2.1",
+    "prettier-eslint": "^12.0.0",
     "ts-interface-builder": "^0.2.2",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.0.3",
     "webpack": "~4.42.1"
   }

src/__test__/Footer.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Footer from '../renderer/Footer';
+
+describe('Footer', () => {
+  it('should render Made by Ottomated text', () => {
+    render(<Footer />);
+
+    expect(screen.getByText('Made by Ottomated')).toBeInTheDocument();
+  });
+});

src/__test__/config/jest.setup.ts

@@ -0,0 +1,3 @@
+import '@testing-library/react/dont-cleanup-after-each';
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

tsconfig.json

@@ -1,6 +1,14 @@
 {
+	"baseUrl": "src",
 	"extends": "./node_modules/electron-webpack/tsconfig-base.json",
 	"compilerOptions": {
-		"jsx": "react"
+		"jsx": "react",
+		"lib": ["dom", "esnext"],
+		"module": "esnext",
+		"outDir": "dist",
+		"esModuleInterop": true
+	},
+	"paths": {
+		"test-utils": ["./utils/test-utils"],
 	}
 }