ci: 🎡 addressing typescript

.lintstagedrc

@@ -1,8 +1,7 @@
 {
   "*.+(js|jsx|ts|tsx)":[
-    "eslint",
-    "tsc-files --noEmit"
-  ],
+    "eslint"
+    ],
   "*.+(js|json|md)":[
     "prettier --write"
   ]

jest.config.js

@@ -12,8 +12,7 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  setupFilesAfterEnv: ["<rootDir>/setupTests.js"], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ["node_modules", "<rootDir>/"],
   testEnvironment: "jest-environment-jsdom",
   rootDir: "./",

package.json

@@ -43,6 +43,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.13",
     "@types/react": "18.3.11",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^8.8.0",
     "@typescript-eslint/parser": "^8.8.0",
     "core-js": "^3.38.1",

setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

src/components/Layout/Layout.test.tsx

@@ -5,7 +5,6 @@ import {
   screen,
   fireEvent,
 } from "@testing-library/react";
-import "@testing-library/jest-dom";
 
 import Layout from "./Layout";
 

src/utils/ErrorBoundry.test.tsx

@@ -10,9 +10,9 @@ describe("<ErrorBoundry/>", () => {
     const Greeting = () => {
       return <div>Hello World</div>;
     };
-    const FallbackComponent = (error) => <span>Error: {error.message}</span>;
+    const fallback = (error) => <span>Error: {error.message}</span>;
     const { getByText, unmount } = render(
-      <ErrorBoundary fallback={<FallbackComponent />}>
+      <ErrorBoundary fallback={fallback}>
         <Greeting />
       </ErrorBoundary>,
     );
@@ -27,9 +27,9 @@ describe("<ErrorBoundry/>", () => {
       throw new Error("Oh shit");
     };
 
-    const FallbackComponent = (error) => <span>Error: {error.message}</span>;
+    const fallback = (error) => <span>Error: {error.message}</span>;
     const { unmount } = render(
-      <ErrorBoundary fallback={<FallbackComponent />}>
+      <ErrorBoundary fallback={fallback}>
         <Greeting />
       </ErrorBoundary>,
     );

src/utils/ErrorBoundry.tsx

@@ -2,7 +2,7 @@ import { Component, ReactNode } from "react";
 
 interface Props {
   children?: ReactNode;
-  fallback?: ReactNode;
+  fallback?: ReactNode | null;
 }
 
 interface State {

src/utils/contentfulPosts.tsx

@@ -5,9 +5,12 @@ import {
   Entry,
 } from "contentful";
 
+const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID || "";
+const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN || "";
+
 const client = createClient({
-  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
-  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN,
+  space,
+  accessToken,
 });
 
 export async function getAllPosts(name: string) {

tsconfig.json

@@ -16,5 +16,6 @@
     "jsx": "preserve"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"],
+  "types": ["node", "jest", "@testing-library/jest-dom"]
 }