upgrade jest and fix eslint errors and tests (#916)

Co-authored-by: Alex Khizhnyi <akhizhniy@spotware.com>

.github/CONTRIBUTING.md

@@ -42,7 +42,7 @@ pnpm run format
 You can also run all four of them at the same time:
 
 ```
-pnpm run  check
+pnpm run check
 ```
 
 > **Note**: If your tests use other fela packages as depedencies, you might need to run `yarn build` (it's also part of the install step).

.prettierrc

@@ -2,7 +2,7 @@
   "trailingComma": "es5",
   "singleQuote": true,
   "bracketSpacing": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "printWidth": 80,
   "tabWidth": 2,
   "useTabs": false,

examples/example-inferno/package.json

@@ -41,7 +41,9 @@
     "cross-env": "^6.0.3",
     "express": "^4.14.0",
     "express-http-proxy": "^1.0.3",
-    "jest": "^26.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rimraf": "^3.0.0",
     "webpack": "^4.41.6",
     "webpack-cli": "^4.9.2",

examples/example-preact/package.json

@@ -41,7 +41,9 @@
     "cross-env": "^6.0.3",
     "express": "^4.14.0",
     "express-http-proxy": "^1.0.3",
-    "jest": "^26.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rimraf": "^3.0.0",
     "webpack": "^4.41.6",
     "webpack-cli": "^4.9.2",

examples/example-react/package.json

@@ -40,7 +40,9 @@
     "cross-env": "^6.0.3",
     "express": "^4.14.0",
     "express-http-proxy": "^1.0.3",
-    "jest": "^26.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rimraf": "^3.0.0",
     "webpack": "^4.41.6",
     "webpack-cli": "^4.9.2",

packages/fela-bindings/package.json

@@ -56,7 +56,9 @@
     "babel-jest": "^26.6.0",
     "cross-env": "^6.0.3",
     "fela": "^12.2.1",
-    "jest": "^26.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^17.0.2",
     "rimraf": "^3.0.0"
   }

packages/fela-codemods/package.json

@@ -55,7 +55,9 @@
     "fela": "^12.2.1",
     "fela-preset-web": "^12.2.1",
     "fela-tools": "^12.2.1",
-    "jest": "^26.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rimraf": "^3.0.0"
   }
 }

packages/fela-dom/package.json

@@ -58,7 +58,9 @@
     "fela": "^12.2.1",
     "fela-preset-web": "^12.2.1",
     "fela-tools": "^12.2.1",
-    "jest": "^26.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "js-beautify": "^1.14.0",
     "jsdom": "^16.6.0",
     "rimraf": "^3.0.0",

packages/fela-dom/src/dom/__tests__/__snapshots__/rehydrate-test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Rehydrating from DOM nodes should rehydrate the renderer cache 1`] = `
-Array [
+[
   10,
-  Object {
-    " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": Object {
+  {
+    " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": {
       "className": "e",
       "declaration": "-webkit-background-color:red;background-color:red",
       "media": "",
@@ -13,7 +13,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "(display: grid) .foo.barcolorred": Object {
+    "(display: grid) .foo.barcolorred": {
       "className": "h",
       "declaration": "color:red",
       "media": "",
@@ -22,7 +22,7 @@ Array [
       "support": "(display: grid)",
       "type": "RULE",
     },
-    "(display: grid)colorblue": Object {
+    "(display: grid)colorblue": {
       "className": "g",
       "declaration": "color:blue",
       "media": "",
@@ -31,7 +31,7 @@ Array [
       "support": "(display: grid)",
       "type": "RULE",
     },
-    ":hover> h1colorgreen": Object {
+    ":hover> h1colorgreen": {
       "className": "j",
       "declaration": "color:green",
       "media": "",
@@ -40,7 +40,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    ":hovercolorred": Object {
+    ":hovercolorred": {
       "className": "i",
       "declaration": "color:red",
       "media": "",
@@ -49,7 +49,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "WebkitBackgroundColorred;background-color:red": Object {
+    "WebkitBackgroundColorred;background-color:red": {
       "className": "c",
       "declaration": "-webkit-background-color:red;background-color:red",
       "media": "",
@@ -58,7 +58,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "WebkitFlex1;-ms-flex:1;flex:1": Object {
+    "WebkitFlex1;-ms-flex:1;flex:1": {
       "className": "d",
       "declaration": "-webkit-flex:1;-ms-flex:1;flex:1",
       "media": "",
@@ -67,16 +67,16 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "[alt=\\"Hello\\"]fontSize12px": Object {
+    "[alt=\"Hello\"]fontSize12px": {
       "className": "f",
       "declaration": "font-size:12px",
       "media": "",
-      "pseudo": "[alt=\\"Hello\\"]",
-      "selector": ".f[alt=\\"Hello\\"]",
+      "pseudo": "[alt=\"Hello\"]",
+      "selector": ".f[alt=\"Hello\"]",
       "support": "",
       "type": "RULE",
     },
-    "coloryellow": Object {
+    "coloryellow": {
       "className": "b",
       "declaration": "color:yellow",
       "media": "",
@@ -90,10 +90,10 @@ Array [
 `;
 
 exports[`Rehydrating from DOM nodes should rehydrate the renderer cache 2`] = `
-Array [
+[
   10,
-  Object {
-    " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": Object {
+  {
+    " #id > .foo ~ barWebkitBackgroundColorred;background-color:red": {
       "className": "e",
       "declaration": "-webkit-background-color:red;background-color:red",
       "media": "",
@@ -102,7 +102,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "(display: grid) .foo.barcolorred": Object {
+    "(display: grid) .foo.barcolorred": {
       "className": "h",
       "declaration": "color:red",
       "media": "",
@@ -111,7 +111,7 @@ Array [
       "support": "(display: grid)",
       "type": "RULE",
     },
-    "(display: grid)colorblue": Object {
+    "(display: grid)colorblue": {
       "className": "g",
       "declaration": "color:blue",
       "media": "",
@@ -120,7 +120,7 @@ Array [
       "support": "(display: grid)",
       "type": "RULE",
     },
-    ":hover> h1colorgreen": Object {
+    ":hover> h1colorgreen": {
       "className": "j",
       "declaration": "color:green",
       "media": "",
@@ -129,7 +129,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    ":hovercolorred": Object {
+    ":hovercolorred": {
       "className": "i",
       "declaration": "color:red",
       "media": "",
@@ -138,7 +138,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "WebkitBackgroundColorred;background-color:red": Object {
+    "WebkitBackgroundColorred;background-color:red": {
       "className": "c",
       "declaration": "-webkit-background-color:red;background-color:red",
       "media": "",
@@ -147,7 +147,7 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "WebkitFlex1;-ms-flex:1;flex:1": Object {
+    "WebkitFlex1;-ms-flex:1;flex:1": {
       "className": "d",
       "declaration": "-webkit-flex:1;-ms-flex:1;flex:1",
       "media": "",
@@ -156,16 +156,16 @@ Array [
       "support": "",
       "type": "RULE",
     },
-    "[alt=\\"Hello\\"]fontSize12px": Object {
+    "[alt=\"Hello\"]fontSize12px": {
       "className": "f",
       "declaration": "font-size:12px",
       "media": "",
-      "pseudo": "[alt=\\"Hello\\"]",
-      "selector": ".parentClass .f[alt=\\"Hello\\"]",
+      "pseudo": "[alt=\"Hello\"]",
+      "selector": ".parentClass .f[alt=\"Hello\"]",
       "support": "",
       "type": "RULE",
     },
-    "coloryellow": Object {
+    "coloryellow": {
       "className": "b",
       "declaration": "color:yellow",
       "media": "",