refactor(starter): upgrade to new version of gatsby

internal/testing/__mocks__/all-markdown-remark.ts

@@ -0,0 +1,52 @@
+export default {
+  allMarkdownRemark: {
+    group: [
+      {
+        fieldValue: "typography",
+        totalCount: 1,
+      },
+      {
+        fieldValue: "design inspiration",
+        totalCount: 1,
+      },
+    ],
+    edges: [
+      {
+        node: {
+          id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
+          fields: {
+            slug: "/posts/perfecting-the-art-of-perfection",
+            categorySlug: "/typography",
+          },
+          frontmatter: {
+            date: "2016-09-01",
+            description:
+              "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
+            category: "typography",
+            title: "Perfecting the Art of Perfection",
+            template: "post",
+          },
+          html: "",
+        },
+      },
+      {
+        node: {
+          id: "066adc91-f87a-4e57-9fef-7a677baf5c1d",
+          fields: {
+            slug: "/posts/the-birth-of-movable-type",
+            categorySlug: "/design-inspiration",
+          },
+          frontmatter: {
+            date: "2016-09-01",
+            description:
+              "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.",
+            category: "design inspiration",
+            title: "Johannes Gutenberg: The Birth of Movable Type",
+            template: "post",
+          },
+          html: "",
+        },
+      },
+    ],
+  },
+};

internal/testing/__mocks__/author.ts

@@ -0,0 +1,8 @@
+import contacts from "./contacts";
+
+export default {
+  photo: "/static/photo.jpg",
+  bio: "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+  name: "John Doe",
+  contacts,
+};

internal/testing/__mocks__/contacts.ts

@@ -0,0 +1,8 @@
+export default {
+  rss: "#",
+  email: "#",
+  github: "#",
+  twitter: "#",
+  telegram: "#",
+  vkontakte: "#",
+};

internal/testing/__mocks__/gatsby.ts

@@ -0,0 +1,28 @@
+import React from "react";
+
+const gatsby = jest.requireActual("gatsby");
+
+export default {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest
+    .fn()
+    .mockImplementation(
+      ({
+        activeClassName,
+        activeStyle,
+        getProps,
+        innerRef,
+        ref,
+        replace,
+        to,
+        ...rest
+      }) =>
+        React.createElement("a", {
+          ...rest,
+          href: to,
+        }),
+    ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+};

internal/testing/__mocks__/index.ts

@@ -0,0 +1,7 @@
+export { default as allMarkdownRemark } from "./all-markdown-remark";
+export { default as markdownRemark } from "./markdown-remark";
+export { default as siteMetadata } from "./site-metadata";
+export { default as pageContext } from "./page-context";
+export { default as contacts } from "./contacts";
+export { default as author } from "./author";
+export { default as menu } from "./menu";

internal/testing/__mocks__/markdown-remark.ts

@@ -0,0 +1,16 @@
+export default {
+  id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
+  fields: {
+    slug: "/posts/perfecting-the-art-of-perfection",
+    categorySlug: "/typography",
+  },
+  frontmatter: {
+    date: "2016-09-01",
+    description:
+      "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
+    category: "typography",
+    title: "Perfecting the Art of Perfection",
+    template: "post",
+  },
+  html: "",
+};

internal/testing/__mocks__/menu.ts

@@ -0,0 +1,5 @@
+export default [
+  { label: "Articles", path: "/" },
+  { label: "About Me", path: "/pages/about" },
+  { label: "Contact Me", path: "/pages/contacts" },
+];

internal/testing/__mocks__/page-context.ts

@@ -0,0 +1,12 @@
+export default {
+  pageContext: {
+    group: "typography",
+    pagination: {
+      currentPage: 2,
+      prevPagePath: "/typography/page/1",
+      nextPagePath: "/typography/page/3",
+      hasNextPage: true,
+      hasPrevPage: true,
+    },
+  },
+};

internal/testing/__mocks__/site-metadata.ts

@@ -0,0 +1,17 @@
+import author from "./author";
+import menu from "./menu";
+
+export default {
+  site: {
+    siteMetadata: {
+      url: "https://www.lumen.local",
+      title: "Blog by John Doe",
+      subtitle:
+        "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+      copyright: "All rights reserved.",
+      postsPerPage: 4,
+      author,
+      menu,
+    },
+  },
+};

internal/testing/jest-config.ts

@@ -0,0 +1,30 @@
+import type { Config } from "@jest/types";
+
+import swc from "./swc-config";
+
+const jestConfig: Config.InitialOptions = {
+  testEnvironment: "jsdom",
+  rootDir: "../../",
+  moduleNameMapper: {
+    "@/hooks": ["<rootDir>/src/hooks"],
+    "@/utils": ["<rootDir>/src/utils"],
+    "@/constants": ["<rootDir>/src/constants"],
+    "@/utils/([^\\.]*)$": ["<rootDir>/src/utils"],
+    "@/pages/([^\\.]*)$": ["<rootDir>/src/pages/$1"],
+    "@/hooks/([^\\.]*)$": ["<rootDir>/src/hooks/$1"],
+    "@/mocks": ["<rootDir>/internal/testing/__mocks__"],
+    "@/scss/([^\\.]*)$": ["<rootDir>/src/assets/scss/$1"],
+    "@/constants/([^\\.]*)$": ["<rootDir>/src/constants/$1"],
+    "@/images/([^\\.]*)$": ["<rootDir>/src/assets/images/$1"],
+    "@/components/([^\\.]*)$": ["<rootDir>/src/components/$1"],
+    ".+\\.(css|sass|scss)$": "identity-obj-proxy",
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "identity-obj-proxy",
+  },
+  transform: { "^.+\\.(t)sx?$": ["@swc/jest", swc] },
+  setupFiles: ["<rootDir>/internal/testing/jest-setup.ts"],
+  testPathIgnorePatterns: ["node_modules", ".cache", "public"],
+  transformIgnorePatterns: ["node_modules/(?!(gatsby)/)"],
+};
+
+export default jestConfig;

internal/testing/jest-setup.ts

@@ -0,0 +1 @@
+jest.mock("gatsby", () => jest.requireActual("./__mocks__/gatsby").default);

internal/testing/swc-config.ts

@@ -0,0 +1,19 @@
+const config = {
+  sourceMaps: true,
+  module: {
+    type: "commonjs",
+  },
+  jsc: {
+    parser: {
+      syntax: "typescript",
+      tsx: true,
+    },
+    transform: {
+      react: {
+        runtime: "automatic",
+      },
+    },
+  },
+};
+
+export default config;