refactor(starter): upgrade and move to typescript

src/components/Layout/Layout.test.tsx

@@ -12,12 +12,11 @@ const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 describe("Layout", () => {
   const props = {
     ...mocks.siteMetadata,
-    description: "test",
-    title: "test",
+    title: mocks.siteMetadata.site.siteMetadata.title,
+    description: mocks.siteMetadata.site.siteMetadata.subtitle,
   };
 
   beforeEach(() => {
-    console.log(mockedStaticQuery);
     mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
     mockedUseStaticQuery.mockReturnValue(props);
   });

src/components/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import Helmet from "react-helmet";
 
 import { useSiteMetadata } from "@/hooks";
 
-import styles from "./Layout.module.scss";
+import * as styles from "./Layout.module.scss";
 
 interface Props {
   title: string;
@@ -12,7 +12,12 @@ interface Props {
   children: React.ReactNode;
 }
 
-const Layout: React.FC<Props> = ({ children, title, description, socialImage = "" }: Props) => {
+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/__snapshots__/Layout.test.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout renders correctly 1`] = `
-<div
-  className="layout"
->
+<div>
   test
 </div>
 `;