chore: upgrade web-nextjs example (#94)

Author: fabioh8010

examples/web-nextjs/.eslintrc.json

@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,9 +28,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
@@ -35,5 +40,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# Reassure
-.reassure
+# Reassure output directory
+.reassure

examples/web-nextjs/.gitignore

@@ -1,4 +1,4 @@
-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://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started
 
@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## Learn More
 
@@ -27,10 +27,10 @@ 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/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 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.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/web-nextjs/README-orig.md

@@ -7,15 +7,18 @@ This example showcases Reassure setup for Next.js web app.
 1. Install following deps as `devDependencies` to setup basic Jest + React Testing Library setup:
    * `jest`
    * `jest-environment-jsdom`
-   * `@types/jest`
    * `@testing-library/react`
+   * `@testing-library/dom`
+   * `@testing-library/jest-dom`
+   * `ts-node`
+   * `@types/jest`
    * `@babel/preset-env`
    * `@babel/preset-react`
-   * `@babel/preset-typescript`   
-2. Copy `jest.config.js` & `babel.config.js` from this repo for RTL tests to run
+   * `@babel/preset-typescript`
+2. Copy `jest.config.ts` from this repo for RTL tests to run
 3. Install `reassure` and `danger` as `devDependencies`
 4. Run `yarn reassure init` to:
    * generate `reassure-tests.sh` CI script 
    * generate `dangerfile.js` config for `danger`
-   * add `.reasure` entry to `.gitignore`
-5. (optional) Add `configure({ testingLibrary: 'react' });` to your `jest-setup.js` file
+   * add `.reassure` entry to `.gitignore`
+5. (optional) Add `configure({ testingLibrary: 'react' });` to your `jest.setup.ts` file

examples/web-nextjs/README.md

@@ -1,7 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import path from 'path';
+import { fileURLToPath } from "url";
 import { dangerReassure } from 'reassure';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 dangerReassure({
   inputFilePath: path.join(__dirname, './.reassure/output.md'),
 });

examples/web-nextjs/babel.config.js

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

examples/web-nextjs/dangerfile.js

@@ -0,0 +1,18 @@
+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: './',
+})
+ 
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/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)