refactor(starter): upgrade to new version of gatsby

src/components/Layout/Layout.module.scss

@@ -1,6 +1,6 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .layout {
-    lost-center: $layout-width;
-}
+  lost-center: $layout-width;
+}

src/components/Layout/Layout.test.js

@@ -1,30 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { useStaticQuery, StaticQuery } from 'gatsby';
-import siteMetadata from '../../../jest/__fixtures__/site-metadata';
-import Layout from './Layout';
-import type { RenderCallback } from '../../types';
-
-describe('Layout', () => {
-  const props = {
-    ...siteMetadata,
-    children: 'test',
-    description: 'test',
-    title: 'test'
-  };
-
-  beforeEach(() => {
-    StaticQuery.mockImplementationOnce(
-      ({ render }: RenderCallback) => (
-        render(props)
-      ),
-      useStaticQuery.mockReturnValue(props)
-    );
-  });
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Layout {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Layout/Layout.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import { Layout } from "@/components/Layout";
+import * as mocks from "@/mocks";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("Layout", () => {
+  const props = {
+    ...mocks.siteMetadata,
+    description: "test",
+    title: "test",
+  };
+
+  beforeEach(() => {
+    console.log(mockedStaticQuery);
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
+    mockedUseStaticQuery.mockReturnValue(props);
+  });
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Layout {...props}>test</Layout>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Layout/Layout.tsx

@@ -1,23 +1,18 @@
-// @flow strict
-import React from 'react';
-import Helmet from 'react-helmet';
-import type { Node as ReactNode } from 'react';
-import { useSiteMetadata } from '../../hooks';
-import styles from './Layout.module.scss';
+import React from "react";
+import Helmet from "react-helmet";
 
-type Props = {
-  children: ReactNode,
-  title: string,
-  description?: string,
-  socialImage?: string
-};
+import { useSiteMetadata } from "@/hooks";
 
-const Layout = ({
-  children,
-  title,
-  description,
-  socialImage = ''
-}: Props) => {
+import styles from "./Layout.module.scss";
+
+interface Props {
+  title: string;
+  description?: string;
+  socialImage?: string;
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<Props> = ({ children, title, description, socialImage = "" }: Props) => {
   const { author, url } = useSiteMetadata();
   const metaImage = socialImage || author.photo;
   const metaImageUrl = url + metaImage;

src/components/Layout/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Layout';

src/components/Layout/index.ts

@@ -0,0 +1 @@
+export { default as Layout } from "./Layout";