fix: tests owrk again, fixed factoriocode

apps/blueprints/babel-jest.config.json

@@ -9,6 +9,6 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ]
 }

apps/blueprints/jest.config.js

@@ -7,5 +7,4 @@ module.exports = {
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
   coverageDirectory: "../../coverage/apps/blueprints",
-  snapshotSerializers: ["@emotion/jest/serializer"],
 };

apps/blueprints/specs/index.spec.tsx

@@ -3,7 +3,6 @@ jest.mock("next/config", () => () => ({
   publicRuntimeConfig: {},
 }));
 
-import React from "react";
 import { render } from "@testing-library/react";
 import Index from "../src/pages/index";
 import * as nextRouter from "next/router";

apps/blueprints/src/components/FactorioCode.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/layout";
+import { Box, Text } from "@chakra-ui/layout";
 import styled from "@emotion/styled";
 import { IconSignalTypes } from "@factorio-sites/types";
 import { ReactNode } from "react";
@@ -49,7 +49,7 @@ const parseFactorioCode = (string: string): ReactNode => {
     if (match.start > lastHandledIndex) {
       let content = string.substr(lastHandledIndex, match.start - lastHandledIndex);
       content = content.replace(/ /g, "\u00A0");
-      result.push(<span key={lastHandledIndex}>{content}</span>);
+      result.push(<Text key={lastHandledIndex}>{content}</Text>);
     }
 
     if (match.groups.color && match.groups.content) {
@@ -57,12 +57,12 @@ const parseFactorioCode = (string: string): ReactNode => {
         match.groups.color = `rgb(${match.groups.color})`;
       }
       result.push(
-        <span
+        <Text
           key={match.start}
           css={{ color: match.groups.color, display: "inline-flex", alignItems: "center" }}
         >
           {parseFactorioCode(match.groups.content)}
-        </span>
+        </Text>
       );
     } else if (match.groups.type && match.groups.icon) {
       if (match.groups.type === "img") {
@@ -88,7 +88,7 @@ const parseFactorioCode = (string: string): ReactNode => {
   });
 
   if (lastHandledIndex < string.length) {
-    result.push(<span key={lastHandledIndex}>{string.substr(lastHandledIndex)}</span>);
+    result.push(<Text key={lastHandledIndex}>{string.substr(lastHandledIndex)}</Text>);
   }
 
   return result;

apps/blueprints/src/components/FactorioIcon.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/layout";
 import { IconSignalTypes } from "@factorio-sites/types";
 
 interface FactorioIconProps {
@@ -40,7 +41,7 @@ export const FactorioIcon: React.FC<FactorioIconProps> = ({ type, icon, size })
     return <span css={{ color: "#ffa700" }}>[{icon}]</span>;
   }
   return (
-    <div
+    <Box
       css={{
         display: "inline-block",
         width: `${size}px`,

apps/blueprints/src/components/__tests__/FactorioCode.spec.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable no-irregular-whitespace */
-import React from "react";
 import { render } from "@testing-library/react";
 import { FactorioCode } from "../FactorioCode";
 import { createSerializer } from "@emotion/jest";
 
-expect.addSnapshotSerializer(createSerializer({ DOMElements: false }));
+expect.addSnapshotSerializer(createSerializer());
 
 const cleanUpElement = (element: Element) => {
   const el = element.querySelector("div > div");
@@ -30,7 +29,7 @@ describe("FactorioCode", () => {
     const { baseElement } = render(<FactorioCode code="Blueprint [color=red]red[/color]" />);
 
     expect(cleanUpElement(baseElement)).toMatchInlineSnapshot(`
-      .emotion-0 {
+      .emotion-1 {
         color: red;
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
@@ -45,14 +44,16 @@ describe("FactorioCode", () => {
       <div
         class=""
       >
-        <span>
+        <p
+          class="chakra-text emotion-0"
+        >
           Blueprint 
-        </span>
-        <span
-          class="emotion-0"
+        </p>
+        <p
+          class="chakra-text emotion-1"
         >
           red
-        </span>
+        </p>
       </div>
     `);
   });
@@ -61,46 +62,6 @@ describe("FactorioCode", () => {
     const { baseElement } = render(<FactorioCode code="Blueprint [item=iron-ore]" />);
 
     expect(cleanUpElement(baseElement)).toMatchInlineSnapshot(`
-      .emotion-0 {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        background-image: url('https://storage.googleapis.com/factorio-blueprints-assets/factorio/graphics/icons/iron-ore.png');
-        -webkit-background-size: 38px;
-        background-size: 38px;
-      }
-
-      <div
-        class=""
-      >
-        <span>
-          Blueprint 
-        </span>
-        <div
-          class="emotion-0"
-        />
-      </div>
-    `);
-  });
-
-  it("should render icons in colors", () => {
-    const { baseElement } = render(
-      <FactorioCode code="Blueprint [color=white]hello [item=iron-ore][/color]" />
-    );
-
-    expect(cleanUpElement(baseElement)).toMatchInlineSnapshot(`
-      .emotion-0 {
-        color: white;
-        display: -webkit-inline-box;
-        display: -webkit-inline-flex;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
       .emotion-1 {
         display: inline-block;
         width: 20px;
@@ -113,19 +74,65 @@ describe("FactorioCode", () => {
       <div
         class=""
       >
-        <span>
-          Blueprint 
-        </span>
-        <span
-          class="emotion-0"
+        <p
+          class="chakra-text emotion-0"
         >
-          <span>
+          Blueprint 
+        </p>
+        <div
+          class="emotion-1"
+        />
+      </div>
+    `);
+  });
+
+  it("should render icons in colors", () => {
+    const { baseElement } = render(
+      <FactorioCode code="Blueprint [color=white]hello [item=iron-ore][/color]" />
+    );
+
+    expect(cleanUpElement(baseElement)).toMatchInlineSnapshot(`
+      .emotion-1 {
+        color: white;
+        display: -webkit-inline-box;
+        display: -webkit-inline-flex;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .emotion-3 {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-image: url('https://storage.googleapis.com/factorio-blueprints-assets/factorio/graphics/icons/iron-ore.png');
+        -webkit-background-size: 38px;
+        background-size: 38px;
+      }
+
+      <div
+        class=""
+      >
+        <p
+          class="chakra-text emotion-0"
+        >
+          Blueprint 
+        </p>
+        <p
+          class="chakra-text emotion-1"
+        >
+          <p
+            class="chakra-text emotion-0"
+          >
             hello 
-          </span>
+          </p>
           <div
-            class="emotion-1"
+            class="emotion-3"
           />
-        </span>
+        </p>
       </div>
     `);
   });

package.json

@@ -113,7 +113,7 @@
     "eslint-plugin-react-hooks": "4.3.0",
     "fork-ts-checker-webpack-plugin": "6.5.0",
     "jest": "27.4.3",
-    "prettier": "2.5.0",
+    "prettier": "2.5.1",
     "prisma": "3.6.0",
     "ts-jest": "27.0.7",
     "ts-node": "10.4.0",

yarn.lock

@@ -13913,10 +13913,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier@2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893"
-  integrity sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==
+prettier@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
 pretty-bytes@^5.6.0:
   version "5.6.0"