Applying Layout component in gatsby-browser

src/components/Layout/__snapshots__/test.js.snap

@@ -20,14 +20,6 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "children": Array [
-        <HelmetWrapper
-          defer={true}
-          encodeSpecialCharacters={true}
-        >
-          <title>
-            Regexper
-          </title>
-        </HelmetWrapper>,
         <Header />,
         <SentryBoundary>
           Example content
@@ -37,31 +29,6 @@ ShallowWrapper {
     },
     "ref": null,
     "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": <title>
-            Regexper
-          </title>,
-          "defer": true,
-          "encodeSpecialCharacters": true,
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper",
-          },
-          "ref": null,
-          "rendered": "Regexper",
-          "type": "title",
-        },
-        "type": [Function],
-      },
       Object {
         "instance": null,
         "key": undefined,
@@ -101,14 +68,6 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "children": Array [
-          <HelmetWrapper
-            defer={true}
-            encodeSpecialCharacters={true}
-          >
-            <title>
-              Regexper
-            </title>
-          </HelmetWrapper>,
           <Header />,
           <SentryBoundary>
             Example content
@@ -118,229 +77,6 @@ ShallowWrapper {
       },
       "ref": null,
       "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": <title>
-              Regexper
-            </title>,
-            "defer": true,
-            "encodeSpecialCharacters": true,
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Regexper",
-            },
-            "ref": null,
-            "rendered": "Regexper",
-            "type": "title",
-          },
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": "Example content",
-          },
-          "ref": null,
-          "rendered": "Example content",
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-      ],
-      "type": [Function],
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-}
-`;
-
-exports[`Layout rendering with a title 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Layout
-    title="Testing"
-  >
-    Example content
-  </Layout>,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "class",
-    "props": Object {
-      "children": Array [
-        <HelmetWrapper
-          defer={true}
-          encodeSpecialCharacters={true}
-        >
-          <title>
-            Regexper - Testing
-          </title>
-        </HelmetWrapper>,
-        <Header />,
-        <SentryBoundary>
-          Example content
-        </SentryBoundary>,
-        <Footer />,
-      ],
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": <title>
-            Regexper - Testing
-          </title>,
-          "defer": true,
-          "encodeSpecialCharacters": true,
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper - Testing",
-          },
-          "ref": null,
-          "rendered": "Regexper - Testing",
-          "type": "title",
-        },
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {},
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": "Example content",
-        },
-        "ref": null,
-        "rendered": "Example content",
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {},
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-    ],
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "class",
-      "props": Object {
-        "children": Array [
-          <HelmetWrapper
-            defer={true}
-            encodeSpecialCharacters={true}
-          >
-            <title>
-              Regexper - Testing
-            </title>
-          </HelmetWrapper>,
-          <Header />,
-          <SentryBoundary>
-            Example content
-          </SentryBoundary>,
-          <Footer />,
-        ],
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": <title>
-              Regexper - Testing
-            </title>,
-            "defer": true,
-            "encodeSpecialCharacters": true,
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Regexper - Testing",
-            },
-            "ref": null,
-            "rendered": "Regexper - Testing",
-            "type": "title",
-          },
-          "type": [Function],
-        },
         Object {
           "instance": null,
           "key": undefined,

src/components/Layout/index.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
 
 import SentryBoundary from 'components/SentryBoundary';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
 
-const Layout = ({ title, children }) => <SentryBoundary>
-  <Helmet>
-    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
-  </Helmet>
+const Layout = ({ children }) => <SentryBoundary>
   <Header />
   <SentryBoundary>
     { children }
@@ -18,7 +14,6 @@ const Layout = ({ title, children }) => <SentryBoundary>
 </SentryBoundary>;
 
 Layout.propTypes = {
-  title: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node

src/components/Layout/test.js

@@ -12,13 +12,4 @@ describe('Layout', () => {
     );
     expect(component).toMatchSnapshot();
   });
-
-  test('rendering with a title', () => {
-    const component = shallow(
-      <Layout title="Testing">
-        Example content
-      </Layout>
-    );
-    expect(component).toMatchSnapshot();
-  });
 });

src/components/Metadata/__snapshots__/test.js.snap

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metadata rendering 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Metadata />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": <title>
+        Regexper
+      </title>,
+      "defer": true,
+      "encodeSpecialCharacters": true,
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "Regexper",
+      },
+      "ref": null,
+      "rendered": "Regexper",
+      "type": "title",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": <title>
+          Regexper
+        </title>,
+        "defer": true,
+        "encodeSpecialCharacters": true,
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Regexper",
+        },
+        "ref": null,
+        "rendered": "Regexper",
+        "type": "title",
+      },
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`Metadata rendering with a title 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Metadata
+    title="Testing"
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": <title>
+        Regexper - Testing
+      </title>,
+      "defer": true,
+      "encodeSpecialCharacters": true,
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "Regexper - Testing",
+      },
+      "ref": null,
+      "rendered": "Regexper - Testing",
+      "type": "title",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": <title>
+          Regexper - Testing
+        </title>,
+        "defer": true,
+        "encodeSpecialCharacters": true,
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Regexper - Testing",
+        },
+        "ref": null,
+        "rendered": "Regexper - Testing",
+        "type": "title",
+      },
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;

src/components/Metadata/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+const Metadata = ({ title }) => (
+  <Helmet>
+    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
+  </Helmet>
+);
+
+Metadata.propTypes = {
+  title: PropTypes.string
+};
+
+export default Metadata;

src/components/Metadata/test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Metadata from 'components/Metadata';
+
+describe('Metadata', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <Metadata />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with a title', () => {
+    const component = shallow(
+      <Metadata title="Testing" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});