test: fix icon tests

package.json

@@ -19,6 +19,7 @@
     "css": "tcm -c src"
   },
   "dependencies": {
+    "@iconify-icon/react": "^1.0.8",
     "@mdx-js/react": "^2.3.0",
     "crypto-js": "^4.1.1",
     "detect-libc": "2.0.1",
@@ -38,7 +39,6 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.22.5",
-    "@iconify/react": "^4.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/crypto-js": "^4.1.1",

src/templates/tags.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { Link, graphql } from "gatsby";
 import sha256 from "crypto-js/sha256";
 import Base16 from "crypto-js/enc-hex";
-import { Icon } from "@iconify/react";
+import { Icon } from "@iconify-icon/react";
 
 import { Layout } from "~components/layout";
 import { ArticlePreview } from "~components/index";
@@ -46,13 +46,7 @@ export const Tag: TagComponent = ({ name, ...props }) => {
     >
       <Link to={`/tags/${name}`}>
         {name}
-        <Icon
-          style={{ display: "inline" }}
-          icon="mdi:tag"
-          color={color}
-          hFlip
-          inline
-        />
+        <Icon style={{ color }} icon="mdi:tag" flip="horizontal" inline />
       </Link>
     </span>
   );

tests/templates/tags.test.tsx

@@ -5,11 +5,11 @@ import { Tag } from "../../src/templates/tags";
 const colors = {
   test: {
     border: "#9f86d0",
-    background: "rgba(159, 134, 208, 0.502)",
+    background: "#9f86d080",
   },
   other: {
     border: "#d9298a",
-    background: "rgba(217, 41, 138, 0.502)",
+    background: "#d9298a80",
   },
 };
 
@@ -35,19 +35,11 @@ describe("Tag component", () => {
       expect(link?.href).toMatch(re);
     });
 
-    // TODO: Fix this test
-    // It is currently not clear to me why this test fails.
-    // the <Icon /> component is not rendered in the test.
-    // Instead the <Icon /> component is rendered as a <span />.
-    // This is not the case when the component is rendered in the browser.
-    xit("shows the tag icon", () => {
-      const { container, getByTestId } = render(
-        <Tag name={name} key={name} />,
-        { hydrate: true }
-      );
-      console.log("container", container.innerHTML);
-      expect(getByTestId("iconify-mdi-tag")).toBeInTheDocument();
-      expect(getByTestId("iconify-mdi-tag")).toHaveStyle({ color: "#aabb" });
+    it("shows the tag icon", () => {
+      const { container } = render(<Tag name={name} key={name} />, {});
+      const icon = container.querySelector("iconify-icon");
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveStyle({ color: color.border });
     });
   }
 });

yarn.lock

@@ -1485,12 +1485,12 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@iconify/react@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@iconify/react/-/react-4.1.0.tgz#5ea86acae6e209a2f5b1b52922ab85d0d22f9b45"
-  integrity sha512-Mf72i3TNNKpKCKxmo7kzqyrUdCgaoljpqtWmtqpqwyxoV4ukhnDsSRNLhf2yBnqGr3cVZsdj/i0FMpXIY0Qk0g==
+"@iconify-icon/react@^1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@iconify-icon/react/-/react-1.0.8.tgz#bbf1695e7550d8b164ac32644d9f9c06b1fb5dd3"
+  integrity sha512-T8Hzz0cQ+08hboS1KFt5t/lBxwpZZuMNVxld2O7vfarPd6mZt9DRRQiM5RIYfB6hxVNddDuzyxbqqfGcMU27pA==
   dependencies:
-    "@iconify/types" "^2.0.0"
+    iconify-icon "^1.0.8"
 
 "@iconify/types@^2.0.0":
   version "2.0.0"
@@ -7305,6 +7305,13 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+iconify-icon@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/iconify-icon/-/iconify-icon-1.0.8.tgz#ad7a36731dca0da0204e488ef0b9ebdad2a7d760"
+  integrity sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
 [email protected], iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"