Merge pull request #49 from bigcommerce/DATA-000

feat: Setup testing environment

.eslintrc.cjs

@@ -18,7 +18,7 @@ const config = {
   parserOptions: {
     project: path.join(__dirname, 'tsconfig.json'),
   },
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'jest'],
   extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended'],
   rules: {
     '@typescript-eslint/consistent-type-imports': [

.github/workflows/validate-workflow.yml

@@ -26,5 +26,8 @@ jobs:
       - name: Lint
         run: SKIP_ENV_VALIDATION=true npm run lint
 
-      - name: Lint
+      - name: Build
         run: SKIP_ENV_VALIDATION=true npm run build
+
+      - name: Test
+        run: SKIP_ENV_VALIDATION=true npm run test

jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  setupFiles: ['./jest.setup.ts']
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

jest.setup.ts

@@ -0,0 +1,5 @@
+import { Response, Request, Headers } from '@whatwg-node/fetch';
+
+global.Response = Response;
+global.Request = Request;
+global.Headers = Headers;

package.json

@@ -10,7 +10,9 @@
     "start": "next start",
     "type-check": "tsc --pretty --noEmit",
     "format": "prettier --write **/*.{js,ts,tsx}",
-    "postinstall": "node ./postinstall.mjs"
+    "postinstall": "node ./postinstall.mjs",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "husky": {
     "hooks": {
@@ -54,20 +56,29 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@types/eslint": "^8.37.0",
+    "@types/jest": "^29.5.12",
     "@types/node": "18.18.4",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@whatwg-node/fetch": "^0.9.17",
     "eslint": "^8.40.0",
     "eslint-config-next": "^13.4.2",
     "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.0.0",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.1",
     "request": "^2.88.2",
+    "ts-jest": "^29.1.3",
+    "ts-node": "^10.9.2",
     "typescript": "^5.0.4"
   },
   "eslintIgnore": [

src/app/page.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Page from './page';
+
+const mockHomePage = jest.fn(() => <div>Mock Home Page</div>);
+
+jest.mock('./home-page', () => ({
+    __esModule: true,
+    default: () => mockHomePage(),
+}));
+
+describe('Page', () => {
+    it('renders Home page', () => {
+        render(<Page />);
+
+        expect(mockHomePage).toHaveBeenCalled();
+    });
+});
+

tsconfig.json

@@ -35,7 +35,9 @@
     "**/*.cjs",
     "**/*.mjs",
     ".next/types/**/*.ts",
-    "postinstall.mjs"
+    "postinstall.mjs",
+    "jest.config.js"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "types": ["jest", "node"]
 }