test: update gatsby config in the e2e test

Author: alvis

e2e/.presetterrc.json

@@ -1,7 +1,14 @@
 {
-  "preset": "presetter-preset-strict",
+  "preset": ["presetter-preset-strict", "presetter-preset-react"],
   "config": {
-    "gitignore": ["/.cache", "/public", "/screenshots", "/types/~*", "/videos"],
+    "gitignore": [
+      "/.cache",
+      "/public",
+      "/screenshots",
+      "/types/~*",
+      "/videos",
+      "gatsby-types.d.ts"
+    ],
     "tsconfig": {
       "compilerOptions": {
         "lib": ["DOM"],
@@ -12,6 +19,5 @@
   "variable": {
     "source": "src",
     "output": "public"
-  },
-  "ignores": [".babelrc.json"]
+  }
 }

e2e/gatsby-config.ts

@@ -20,22 +20,15 @@
 
 import type { GatsbyConfig } from 'gatsby';
 
+export const graphqlTypegen: GatsbyConfig['graphqlTypegen'] = true;
+
+export const jsxRuntime: GatsbyConfig['jsxRuntime'] = 'automatic';
+
 export const plugins: GatsbyConfig['plugins'] = [
-  {
-    resolve: 'gatsby-plugin-graphql-codegen',
-    options: {
-      fileName: './types/~graphql.ts',
-      documentPaths: ['./src/**/*.{ts,tsx}'],
-    },
-  },
   {
     resolve: 'gatsby-source-notion',
     options: {
       previewCallRate: 0.5,
     },
   },
 ];
-
-export default {
-  plugins,
-};

e2e/package.json

@@ -12,12 +12,13 @@
   },
   "devDependencies": {
     "cypress": "^8.7.0",
-    "gatsby-plugin-graphql-codegen": "^3.0.0",
     "presetter": "^3.0.0",
+    "presetter-preset-react": "^3.0.0",
     "presetter-preset-strict": "^3.0.0",
     "start-server-and-test": "^1.0.0"
   },
   "dependencies": {
-    "gatsby": "^4.0.0"
+    "gatsby": "^4.0.0",
+    "react": "^17.0.0"
   }
 }

e2e/src/pages/index.tsx

@@ -14,13 +14,10 @@
  */
 
 import { graphql } from 'gatsby';
-import React from 'react';
 
 import type { PageProps } from 'gatsby';
 import type { FC } from 'react';
 
-import type { IndexPageQuery } from '~graphql';
-
 // page query
 export const query = graphql`
   query IndexPage {
@@ -44,7 +41,7 @@ export const query = graphql`
  * @inheritdoc
  * @returns a component holding the test page
  */
-const Test: FC<PageProps<IndexPageQuery>> = ({ data }) => (
+const Test: FC<PageProps<Queries.IndexPageQuery>> = ({ data }) => (
   <>
     <section id="databases">
       <h1>Databases</h1>
@@ -58,7 +55,7 @@ const Test: FC<PageProps<IndexPageQuery>> = ({ data }) => (
       <h1>Pages</h1>
       <ul>
         {data.allNotionPage.nodes.map(({ ref, title }) => (
-            <li key={ref}>{title}</li>
+          <li key={ref}>{title}</li>
         ))}
       </ul>
     </section>
@@ -73,4 +70,3 @@ const Test: FC<PageProps<IndexPageQuery>> = ({ data }) => (
 // const Test: FC<PageProps> = ({ data }) => <div>hi!</div>;
 
 export default Test;
-