feat: add test setup based on jest and testing-library

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react","@babel/preset-env"]
+}

package.json

@@ -8,7 +8,9 @@
     "build": "parcel build index.html --no-cache",
     "lint": "eslint 'src/**/*.js' --quiet --fix",
     "clean": "rimraf ./dist ./.cache",
-    "ci:lint": "eslint 'src/**/*.js' -c ./.eslintrc.js"
+    "ci:lint": "eslint 'src/**/*.js' -c ./.eslintrc.js",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "codemirror": "5.53.2",
@@ -21,11 +23,17 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "@testing-library/dom": "^7.5.7",
+    "@testing-library/react": "^10.0.4",
+    "@testing-library/user-event": "^10.3.5",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "husky": "^4.2.5",
+    "jest": "^26.0.1",
     "lint-staged": "^10.2.2",
     "parcel-bundler": "^1.6.1",
     "postcss-easy-import": "^3.0.0",
@@ -34,6 +42,15 @@
     "rimraf": "^3.0.2",
     "tailwindcss": "^1.4.6"
   },
+  "jest": {
+    "verbose": true,
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|svg)$": "<rootDir>/src/__mocks__/fileMock.js"
+    },
+    "setupFilesAfterEnv": [
+      "./tests/setupTests.js"
+    ]
+  },
   "keywords": [],
   "husky": {
     "hooks": {

src/__mocks__/fileMock.js

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

src/components/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+import { renderWithContext } from '../../tests/utils/render';
+
+describe('App', () => {
+  it('should not throw on render', () => {
+    renderWithContext(<App />);
+  });
+});

tests/setupTests.js

@@ -0,0 +1,14 @@
+import * as TestingLibraryDom from '@testing-library/dom';
+
+window.TestingLibraryDom = TestingLibraryDom;
+
+if (window.document) {
+  window.document.createRange = () => ({
+    setStart: () => {},
+    setEnd: () => {},
+    getBoundingClientRect: () => {
+      return { right: 0 };
+    },
+    getClientRects: () => [],
+  });
+}

tests/utils/render.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AppContextProvider } from '../../src/components/Context';
+
+function renderWithContext(component, ...args) {
+  return render(<AppContextProvider>{component}</AppContextProvider>, ...args);
+}
+
+export { renderWithContext };