Update to node 14, fix jest to work in new version

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
 
       - uses: actions/setup-node@v2-beta
         with:
-          node-version: "12"
+          node-version: "14"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

README.md

@@ -18,7 +18,7 @@ A [NextJs](https://nextjs.org/) VueJS app with PWA mode enabled and [Jest](https
 
 ### Prerequisites
 
-- NodeJS v12+
+- NodeJS v14+
 - Yarn v1.21+
 
 ### Install dependencies

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [['@babel/preset-env', {
+    targets: {
+      node: true,
+    },
+  }], ['next/babel', {
+    targets: {
+      node: false,
+    },
+  }]],
+};

jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx}',
+    '!src/index.js',
+    '!**/serviceWorker.js',
+    '!src/tests/fixtures/*.js',
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/src/setupTests.js',
+  ],
+  moduleNameMapper: {
+    '\\.svg': '<rootDir>/src/__mocks__/svgrMock.js',
+  },
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+  moduleDirectories: ['node_modules', 'src'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  verbose: true,
+};

package.json

@@ -22,7 +22,7 @@
     "test:cov": "NODE_ENV=test jest --collect-coverage --watchAll"
   },
   "engines": {
-    "node": "12.x",
+    "node": "14.x",
     "yarn": "1.x"
   },
   "cacheDirectories": [
@@ -34,8 +34,6 @@
     "@material-ui/icons": "^4.9.1",
     "add": "^2.0.6",
     "axios": "^0.21.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.4",
     "firebase": "^9.9.4",
     "firebaseui": "^6.0.1",
     "html-to-pdfmake": "^2.1.2",
@@ -73,29 +71,21 @@
     ]
   },
   "proxy": "http://localhost:3000",
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}",
-      "!src/index.js",
-      "!**/serviceWorker.js",
-      "!src/tests/fixtures/*.js"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js"
-    ],
-    "moduleNameMapper": {
-      "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js"
-    }
-  },
   "devDependencies": {
+    "@babel/preset-env": "^7.19.3",
     "@svgr/webpack": "^5.4.0",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.1.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.8.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",
-    "jest": "28.1.3",
+    "jest": "^29.1.2",
+    "jsdom": "^20.0.1",
+    "jsdom-global": "^3.0.2",
     "redux-mock-store": "^1.5.4"
   }
 }

src/setupTests.js

@@ -1,6 +1,23 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
+// For some reason require works here and not others
+// TODO fix this and use better syntax
+require('jsdom-global/register');
+
+// See issue about mutation observer
+// https://stackoverflow.com/questions/48809753/testing-mutationobserver-with-jest
+// Just doesn't support mutation observer so I am just adding a mock
+const mutationObserverMock = jest.fn(function MutationObserver(callback) {
+  this.observe = jest.fn();
+  this.disconnect = jest.fn();
+  // Optionally add a trigger() method to manually trigger a change
+  this.trigger = (mockedMutationsList) => {
+    callback(mockedMutationsList, this);
+  };
+});
+global.MutationObserver = mutationObserverMock;
 
 React.useLayoutEffect = React.useEffect;