add jest to the mix, handle gatsby config files

Author: d4rekanguok

.eslintignore

@@ -1,7 +1,4 @@
 node_modules
 
 ## babel, jest, prettier
-*.config.js
-
-## test files
-*.test.js
+*.config.js

.eslintrc.js

@@ -1,16 +1,52 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:prettier/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
   ],
-  rules: {
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/member-delimiter-style': 0,
-    '@typescript-eslint/interface-name-prefix': 0,
-  }
+  overrides: [
+    // typescript
+    {
+      files: ["*.ts", "*.tsx"],
+      excludedFiles: ["*.test.js", "gatsby-node.js", "gatsby-config.js"],
+      plugins: ['@typescript-eslint'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/member-delimiter-style': 0,
+        '@typescript-eslint/interface-name-prefix': 0,
+        '@typescript-eslint/no-use-before-define': 0,
+      },
+    },
+
+    // gatsby config files
+    {
+      files: ["gatsby-node.js", "gatsby-config.js"],
+      env: {
+        "node": true,
+      }
+    },
+
+    // test files
+    {
+      files: ["*.test.js"],
+      plugins: ['jest'],
+      env: {
+        "es6": true,
+        "node": true,
+        "jest/globals": true,
+      },
+      extends: [
+        "plugin:jest/recommended"
+      ]
+      parserOptions: {
+        ecmaVersion: 2019,
+        sourceType: "module",
+      }
+    }
+  ],
 }

package.json

@@ -24,6 +24,7 @@
     "@typescript-eslint/parser": "^2.19.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-jest": "^23.7.0",
     "eslint-plugin-prettier": "^3.1.2",
     "jest": "^25.1.0",
     "lerna": "^3.16.4",

packages/gatsby-plugin-graphql-codegen/src/gatsby-node.test.js

@@ -3,8 +3,8 @@ import { generateWithConfig } from './graphql-codegen.config'
 
 jest.mock('./graphql-codegen.config', () => ({ generateWithConfig: jest.fn() }))
 
-const delay = (milliseconds) =>
-  new Promise((resolve) => setTimeout(resolve, milliseconds))
+const delay = milliseconds =>
+  new Promise(resolve => setTimeout(resolve, milliseconds))
 
 it('early returns if the codegen option is false', async () => {
   const mockGetState = jest.fn()
@@ -156,7 +156,7 @@ it('subscribes to the store and debounces the `build` function', async () => {
   const mockGatsbyArgs = {
     store: {
       getState: () => mockState,
-      subscribe: (listener) => {
+      subscribe: listener => {
         notify = listener
       },
     },
@@ -210,7 +210,7 @@ it("doesn't call build if the `lastAction.type` isn't 'REPLACE_STATIC_QUERY' or
   const mockGatsbyArgs = {
     store: {
       getState: () => mockState,
-      subscribe: (listener) => {
+      subscribe: listener => {
         notify = listener
       },
     },

packages/gatsby-plugin-ts/src/gatsby-node.test.js

@@ -11,7 +11,7 @@ jest.mock(
       constructor(options) {
         this.options = options
       }
-    },
+    }
 )
 
 jest.mock('./require-resolve', () => () => 'mock-resolved.ts')

packages/gatsby-starter-blog-ts/gatsby-config.js

@@ -52,7 +52,7 @@ module.exports = {
       options: {
         typeCheck: process.env.NODE_ENV !== 'production',
         fileName: `gen/graphql-types.ts`,
-      }
+      },
     },
     // `gatsby-plugin-typescript`,
     // `gatsby-plugin-graphql-codegen`,

packages/gatsby-starter-blog-ts/src/components/bio.tsx

@@ -5,11 +5,11 @@
  * See: https://www.gatsbyjs.org/docs/static-query/
  */
 
-import React from "react"
-import { StaticQuery, graphql } from "gatsby"
-import Image from "gatsby-image"
+import * as React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+import Image from 'gatsby-image'
 
-import { rhythm } from "../utils/typography"
+import { rhythm } from '../utils/typography'
 
 function Bio() {
   return (

packages/gatsby-starter-blog-ts/src/components/layout.tsx

@@ -1,11 +1,11 @@
-import React from "react"
-import { Link } from "gatsby"
+import React from 'react'
+import { Link } from 'gatsby'
 
-import { rhythm, scale } from "../utils/typography"
+import { rhythm, scale } from '../utils/typography'
 
 interface ILayoutProps {
-  location: Location;
-  title: string;
+  location: Location
+  title: string
 }
 
 class Layout extends React.Component<ILayoutProps> {

packages/gatsby-starter-blog-ts/src/components/seo.tsx

@@ -5,10 +5,10 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+import { useStaticQuery, graphql } from 'gatsby'
 
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(

packages/gatsby-starter-blog-ts/src/global.d.ts

@@ -1 +1 @@
-declare const __PATH_PREFIX__: string
+declare const __PATH_PREFIX__: string