refactor: client jest -> vitest (#62177)

client/__mocks__/gatsby.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { GatsbyLinkProps } from 'gatsby';
+import { vi } from 'vitest';
+import gatsby from 'gatsby';
+
+import envData from '../config/env.json';
+const { clientLocale } = envData;
+
+export const navigate = vi.fn();
+export const graphql = vi.fn();
+export const Link = vi
+  .fn()
+  .mockImplementation(({ to, ...rest }: GatsbyLinkProps<undefined | boolean>) =>
+    React.createElement('a', { ...rest, href: to })
+  );
+export const withPrefix = vi.fn().mockImplementation((path: string) => {
+  const pathPrefix = clientLocale === 'english' ? '' : '/' + clientLocale;
+  return pathPrefix + path;
+});
+export const StaticQuery = vi.fn();
+export const useStaticQuery = vi.fn();
+
+export default {
+  // ...existing code...
+  // spread the actual gatsby module to keep other exports working
+  ...gatsby,
+  navigate,
+  graphql,
+  Link,
+  withPrefix,
+  StaticQuery,
+  useStaticQuery
+};

client/__mocks__/react-i18next.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+// modified from https://github.com/i18next/react-i18next/blob/master/example/test-jest/src/__mocks__/react-i18next.js
+const hasChildren = node =>
+  node && (node.children || (node.props && node.props.children));
+
+const getChildren = node =>
+  node && node.children ? node.children : node.props && node.props.children;
+
+const renderNodes = reactNodes => {
+  if (typeof reactNodes === 'string') {
+    return reactNodes;
+  }
+
+  return Object.keys(reactNodes).map((key, i) => {
+    const child = reactNodes[key];
+    const isElement = React.isValidElement(child);
+
+    if (typeof child === 'string') {
+      return child;
+    }
+    if (hasChildren(child)) {
+      const inner = renderNodes(getChildren(child));
+      return React.cloneElement(child, { ...child.props, key: i }, inner);
+    }
+    if (typeof child === 'object' && !isElement) {
+      return Object.keys(child).reduce(
+        (str, childKey) => `${str}${child[childKey]}`,
+        ''
+      );
+    }
+
+    return child;
+  });
+};
+
+const withTranslation = () => Component => {
+  Component.defaultProps = { ...Component.defaultProps, t: str => str };
+  return Component;
+};
+
+const useTranslation = () => {
+  return {
+    t: str => str,
+    i18n: {
+      changeLanguage: () => new Promise(() => {})
+    }
+  };
+};
+
+const Trans = ({ children }) =>
+  Array.isArray(children) ? renderNodes(children) : renderNodes([children]);
+
+// translate isn't being used anywhere, uncomment if needed
+/* const translate = () => Component => props => (
+  <Component t={() => ''} {...props} />
+); */
+
+module.exports = { withTranslation, useTranslation, Trans };

client/__mocks__/react-spinkit.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+
+// eslint-disable-next-line react/display-name
+export default () => <div>Spinner</div>;