Fix tests and update node version

.github/workflows/learning-web-branch.yaml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v1
         with:
-          node-version: "13.11"
+          node-version: "14.17"
 
       - name: Install modules
         working-directory: learning/web

.github/workflows/learning-web-master.yaml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v1
         with:
-          node-version: "13.11"
+          node-version: "14.17"
 
       - name: Install modules
         working-directory: learning/web

.github/workflows/learning-web-release.yaml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v1
         with:
-          node-version: "13.11"
+          node-version: "14.17"
 
       - name: Install modules
         working-directory: learning/web

learning/web/babel.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  presets: [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+  ],
+  plugins: [
+    [
+      "@babel/plugin-proposal-private-property-in-object",
+      {
+        loose: true,
+      },
+    ],
+  ],
+}

learning/web/config/__mocks__/gatsby.js

@@ -1,6 +1,5 @@
 const React = require("react")
 const gatsby = jest.requireActual("gatsby")
-
 module.exports = {
   ...gatsby,
   graphql: jest.fn(),

learning/web/config/jest-preprocess.js

@@ -1,5 +1,4 @@
 const babelOptions = {
   presets: ["babel-preset-gatsby"],
 }
-
-module.exports = require("babel-jest").createTransformer(babelOptions)
+module.exports = require("babel-jest").default.createTransformer(babelOptions)

learning/web/jest.config.js

@@ -2,22 +2,23 @@ module.exports = {
   transform: {
     "^.+\\.jsx?$": `<rootDir>/config/jest-preprocess.js`,
   },
-  moduleNameMapper: {
-    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
-    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/config/file-mock.js`,
-  },
   testPathIgnorePatterns: [
     `node_modules`,
     `\\.cache`,
     `<rootDir>.*/public`,
     `<rootDir>/cypress`,
   ],
-  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby|gatsby-script|uuid)/)`],
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/config/file-mock.js`,
+  },
+  testEnvironmentOptions: {
+    url: `http://localhost`,
+  },
+  testEnvironment: "jsdom",
   globals: {
     __PATH_PREFIX__: ``,
   },
-  roots: ["<rootDir>/src/", "<rootDir>/config/"],
-  testURL: `http://localhost`,
-  setupFiles: [`<rootDir>/config/loadershim.js`, "<rootDir>/config/enzyme.js"],
-  snapshotSerializers: ["enzyme-to-json/serializer"],
+  setupFiles: [`<rootDir>/config/loadershim.js`],
 }

learning/web/package.json

@@ -47,14 +47,14 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
+    "@babel/preset-react": "^7.17.12",
     "babel-jest": "^28.1.0",
     "babel-preset-gatsby": "^2.15.0",
     "cypress": "^9.7.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "minimatch": "^5.1.0",
     "pa11y-ci": "^3.0.1",
     "prettier": "^2.6.2",

learning/web/src/components/CookieBanner/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CookieBanner should render 🍪 1`] = `" "`;

learning/web/src/components/CookieBanner/index.test.js → learning/web/src/components/CookieBanner/index.test.jsx

@@ -1,10 +1,14 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from "react"
 import CookieBanner from "./index"
-import { shallow } from "enzyme"
+import renderer from 'react-test-renderer';
 
 describe(CookieBanner, () => {
   it("should render 🍪", () => {
-    const component = shallow(<CookieBanner />)
+    const component = renderer.create(<CookieBanner />).toJSON()
     expect(component).toMatchSnapshot()
   })
 })

learning/web/src/components/Expander/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expander should render 1`] = `
+<div
+  className="sc-bczRLJ dOVkPd"
+>
+  <button
+    className="sc-gsnTZi fnbOwy"
+    onClick={[Function]}
+    title="expand"
+  >
+    Hola
+  </button>
+  <div
+    className="sc-hKMtZM ijoscT hidden"
+  >
+    <button
+      className="sc-dkzDqf grguyE"
+      onClick={[Function]}
+      title="close"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;

learning/web/src/components/Expander/index.test.js → learning/web/src/components/Expander/index.test.jsx

@@ -1,10 +1,11 @@
 import React from "react"
 import Expander from "./index"
-import { shallow } from "enzyme"
+import renderer from "react-test-renderer"
 
 describe(Expander, () => {
   it("should render", () => {
-    const component = shallow(<Expander title={"Hola"} children={<></>} />)
+    const component = renderer.create(<Expander title={"Hola"} children={<></>} />)
+      .toJSON()
     expect(component).toMatchSnapshot()
   })
 })