chore: update jest config, .gitignore, and move files to TS (#505)

.eslintrc

@@ -32,6 +32,7 @@
     "react/prop-types": "off",
     "react/jsx-filename-extension": "off",
     "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
     "import/no-extraneous-dependencies": [
       "error",
       {

.gitignore

@@ -5,18 +5,31 @@
 /.pnp
 .pnp.js
 
+# JetBrains IDE files
+.idea/
+
 # testing
 /coverage
 
 # gatsby
 .cache/
 public/
 
+# production
+/build
+
 # misc
 .DS_Store
-.env\*
+*.pem
+tsconfig.tsbuildinfo
 
 # debug
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log\*
+yarn-error.log*
+
+# local env files
+.env\*
+
+# vercel
+.vercel

__helpers__/loadershim.js → __helpers__/loadershim.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 global.___loader = {
   enqueue: jest.fn(),
 };

__helpers__/setup.ts

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom';

gatsby-config.ts

@@ -6,4 +6,4 @@ const config: GatsbyConfig = {
   plugins: [],
 };
 
-export default config;
+export default config;

gatsby-node.ts

@@ -9,4 +9,4 @@ export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({
       plugins: [new TsconfigPathsPlugin()],
     },
   });
-};
+};

jest.config.js

@@ -1,30 +1,27 @@
 module.exports = {
-    cacheDirectory: '<rootDir>/.cache/unit',
-    globals: {
-        'ts-jest': {
-          tsconfig: 'tsconfig.spec.json',
-        },
-        __PATH_PREFIX__: ``,
+  preset: 'ts-jest',
+  rootDir: '.',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.spec.json',
     },
-    moduleDirectories: ['node_modules', 'src'],
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-    moduleNameMapper: {
-      '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
-      '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
-      '@/(.*)': '<rootDir>/src/$1',
-    },
-    preset: 'ts-jest',
-    rootDir: '.',
-    setupFiles: [`<rootDir>/__helpers__/loadershim.js`],
-    setupFilesAfterEnv: ['<rootDir>/__helpers__/setup.ts'],
-    testEnvironment: 'jsdom',
-    testPathIgnorePatterns: [
-      '<rootDir>/__mocks__/*',
-      'node_modules',
-      '\\.cache',
-      '<rootDir>.*/public',
-    ],
-    testURL: `http://localhost`,
-    transform: { '^.+\\.[tj]sx?$': 'ts-jest' },
-    transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
-  };
+    __PATH_PREFIX__: ``,
+    __BASE_PATH__: ``,
+  },
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.ts`,
+    '@/(.*)': '<rootDir>/src/$1',
+  },
+  setupFiles: [`<rootDir>/__helpers__/loadershim.ts`],
+  setupFilesAfterEnv: ['<rootDir>/__helpers__/setup.ts'],
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.svg$': '<rootDir>/__mocks__/svgTransform.ts',
+  },
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+};

src/components/Title.spec.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 
-import Title from './Title';
+import Title from '@/components/Title';
 
 describe(`Title`, () => {
   it(`renders a Title component`, () => {

src/components/Title.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { BaseComponentProps } from '@/types';
+import React, { ReactNode } from 'react';
 
-export default function Title(props: BaseComponentProps) {
-  const { children } = props;
+type TitleProps = {
+  children: ReactNode;
+};
 
+export default function Title({ children }: TitleProps) {
   return <h1>{children}</h1>;
 }

tsconfig.spec.json

@@ -1,7 +1,7 @@
 {
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        "jsx": "react"
-    },
-    "include": []
-}
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  },
+  "include": []
+}