jest setup, cypress type conflict fix

website/cypress.config.js

@@ -21,6 +21,7 @@ export default defineConfig({
       // implement node event listeners here
       getCompareSnapshotsPlugin(on, config);
     },
+    specPattern: "cypress/components/*.cy.tsx"
   },
 
   env: {

website/cypress/components/Container.cy.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Container } from "./Container";
+import { Container } from "../../src/components/Container";
 
 describe("<Container />", () => {
   it("renders", () => {

website/cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx"
+  },
+
+  "include": ["**/*.ts", "**/*.tsx"]
+}

website/jest.config.js

@@ -0,0 +1,20 @@
+// jest.config.js
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+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
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

website/jest.setup.js

@@ -0,0 +1,2 @@
+// jest.setup.js
+import '@testing-library/jest-dom/extend-expect'

website/package.json

@@ -13,6 +13,7 @@
     "cypress": "cypress open",
     "cypress:run": "cypress run",
     "cypress:image-baseline": "cypress-image-diff -u",
+    "jest": "jest --watch",
     "fix:lint": "eslint --fix src/ --ext .js,.jsx,.ts,.tsx",
     "fix:format": "prettier --write ./src",
     "fix": "npm run fix:format && npm run fix:lint"
@@ -67,6 +68,8 @@
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
@@ -75,6 +78,8 @@
     "cypress-image-diff-js": "^1.23.0",
     "eslint-plugin-storybook": "^0.6.8",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "prettier": "2.8.1",
     "prisma": "^4.7.1",
     "typescript": "4.9.4"

website/src/components/TaskSelection/TaskOption.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import { OptionProps, TaskOption } from "./TaskOption";
+
+describe("TaskOption component", () => {
+  const testProps: OptionProps = {
+    alt: "Task Title",
+    img: "/imgPath",
+    title: "Task Title",
+    link: "/create/summarize_story",
+  };
+
+  beforeEach(() => {
+    render(<TaskOption {...testProps} />);
+  });
+
+  it("should render Task Option component", () => {
+    expect(screen.getByRole("heading")).toHaveTextContent(testProps.title);
+    expect(screen.getByRole("link")).toHaveAttribute("href", testProps.link);
+    expect(screen.queryByText("hi")).toBeNull();
+  });
+});

website/tsconfig.json

@@ -17,5 +17,5 @@
     "baseUrl": "."
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "cypress"]
 }