Karina/wmdp 35 setup test suite (#5)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <[email protected]>

* Update app/README.md

Co-authored-by: Rocket <[email protected]>

* Update app/README.md

Co-authored-by: Rocket <[email protected]>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* Update app/.babelrc

Co-authored-by: Rocket <[email protected]>

* Update app/package.json

Co-authored-by: Rocket <[email protected]>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README: add tsconfig documentation

* README: add test script documentation

Co-authored-by: Rocket <[email protected]>

Author: karinamzalez

app/.babelrc

@@ -0,0 +1,8 @@
+{
+  /**
+   * `next/babel` is required for our React tests to work
+   * https://nextjs.org/docs/advanced-features/customizing-babel-config
+   */
+  "presets": ["next/babel"],
+  "plugins": []
+}

app/README.md

@@ -1,12 +1,16 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). This README has been modified from the auto-generated one. 
 
 ## Getting Started
 
-First, run the development server:
+First, install dependencies:
+
+```bash
+yarn
+```
+
+Second, run the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
 ```
 
@@ -18,17 +22,16 @@ A starter [API route](https://nextjs.org/docs/api-routes/introduction) can be ac
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/).
+### Tsconfig additions to auto-generated file
 
-## Deploy on Vercel
+- `target: es6` -- nextJS set this valule to `es5` by default. 
+- `allowJS: true` -- allows ts checks on javascript files. 
+- `checkJS: true` -- works in tandem with `allowJS`. Alternative to adding `// @ts-check` at top of Js files-- instructs ts to check all js files. 
+- `jsx: react-jsx` -- [Documentation on this option](https://www.typescriptlang.org/docs/handbook/jsx.html). This value updates the JSX mode that TS whips with. Updating this from "preserve" helped get jest tests into a passing state. TODO: figure out why.
+- `incremental: true` -- enables incremental typechecking. Incremental typechecking creates a series of `.tsbuildinfo` files to dave information from last compilation. This expedites type checking during build. 
+- `baseUrl: "."` & `paths: { @pages/*: [pages/*] }` -- These two, in tandem, setup module path aliases for cleaner imports. To utilize this, import files like: `import Home from "@pages/index";`
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### Package.json 
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+#### Scripts
+- `test`: runs `jest --ci --coverage`. [--ci option](https://jestjs.io/docs/cli#--ci) is provided so that snapshots don't get created automatically, it will require Jest to be run with `--updateSnapshot`. [--coverage option](https://jestjs.io/docs/cli#--coverageboolean) is provided to instruct jest to collect and report test coverage in output. 

app/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

app/jest.config.js

@@ -0,0 +1,23 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js", // sets up routing to mocks style sheet
+    "^@pages(.*)$": "<rootDir>/pages$1" //allows module imports of page components
+  },
+  setupFilesAfterEnv: ["<rootDir>/test/jest.setup.js"],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  }, //transfrom typescript files to common js for jest compiler
+  transformIgnorePatterns: [
+    "/.next/",
+    "/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$"
+  ],
+  testPathIgnorePatterns: [
+    "<rootDir>/node_modules/",
+  ],
+  testRegex: "(/test/.*(test|spec))\\.[jt]sx?$"
+};

app/package.json

@@ -3,22 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
     "start": "next start",
-    "lint": "next lint"
+    "test": "jest --ci --coverage"
   },
   "dependencies": {
+    "@types/jest-axe": "^3.5.3",
+    "jest-axe": "^6.0.0",
     "next": "12.1.6",
     "react": "18.1.0",
     "react-dom": "18.1.0"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.17.12",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@types/jest": "^27.5.1",
     "@types/node": "17.0.34",
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.4",
+    "@types/testing-library__jest-dom": "^5.14.3",
+    "@types/testing-library__react": "^10.2.0",
+    "babel-jest": "^28.1.0",
     "eslint": "8.15.0",
     "eslint-config-next": "12.1.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "ts-jest": "^28.0.2",
     "typescript": "4.6.4"
   }
 }

app/test/jest.setup.js

@@ -0,0 +1,4 @@
+require('@testing-library/jest-dom');
+const { toHaveNoViolations } = require("jest-axe");
+
+expect.extend(toHaveNoViolations);

app/test/pages/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Home should render the heading 1`] = `
+<a
+  href="https://github.com/navapbc/template-application-nextjs"
+>
+  Next.js Template!
+</a>
+`;

app/test/pages/index.test.tsx

@@ -0,0 +1,25 @@
+// test/pages/index.test.js
+
+import { render, screen } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+import Home from "@pages/index";
+
+describe("Home", () => {
+  it("should render the heading", () => {
+    render(<Home />);
+
+    const heading = screen.getByText(
+      /Next.js Template!/i
+    );
+
+    expect(heading).toBeInTheDocument();
+    expect(heading).toMatchSnapshot();
+  });
+
+  it("should pass accessibility scan", async () => {
+    const { container } = render(<Home />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  })
+});

app/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@pages/*": ["pages/*"]
+    },
     "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -12,9 +16,9 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__mocks__/styleMock.js"],
   "exclude": ["node_modules"]
 }