Initial commit from Create Next App

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "root": true,
+  "extends": ["next/core-web-vitals"],
+  "plugins": ["testing-library"],
+  "overrides": [
+    // Only uses Testing Library lint rules in test files
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -0,0 +1,23 @@
+# Next.js + Jest
+
+This example shows how to configure Jest to work with Next.js.
+
+This includes Next.js' built-in support for Global CSS, CSS Modules, and TypeScript!
+
+## How to Use
+
+Quickly get started using [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app#readme)!
+
+In your terminal, run the following command:
+
+```bash
+npx create-next-app --example with-jest with-jest-app
+# or
+yarn create next-app --example with-jest with-jest-app
+```
+
+## Run Jest Tests
+
+```bash
+npm test
+```

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

__mocks__/styleMock.js

@@ -0,0 +1,4 @@
+// Mock CSS files.
+// If you're using CSS modules, this file can be deleted.
+
+module.exports = {}

__tests__/__snapshots__/snapshot.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders homepage unchanged 1`] = `
+<div
+  className="container"
+>
+  <main>
+    <h1
+      className="title"
+    >
+      Welcome to 
+      <a
+        href="https://nextjs.org"
+      >
+        Next.js!
+      </a>
+    </h1>
+    <p
+      className="description"
+    >
+      Get started by editing 
+      <code>
+        pages/index.js
+      </code>
+    </p>
+    <div
+      className="grid"
+    >
+      <a
+        className="card"
+        href="https://nextjs.org/docs"
+      >
+        <h3>
+          Documentation →
+        </h3>
+        <p>
+          Find in-depth information about Next.js features and API.
+        </p>
+      </a>
+      <a
+        className="card"
+        href="https://nextjs.org/learn"
+      >
+        <h3>
+          Learn →
+        </h3>
+        <p>
+          Learn about Next.js in an interactive course with quizzes!
+        </p>
+      </a>
+      <a
+        className="card"
+        href="https://github.com/vercel/next.js/tree/master/examples"
+      >
+        <h3>
+          Examples →
+        </h3>
+        <p>
+          Discover and deploy boilerplate example Next.js projects.
+        </p>
+      </a>
+      <a
+        className="card"
+        href="https://vercel.com/new"
+      >
+        <h3>
+          Deploy →
+        </h3>
+        <p>
+          Instantly deploy your Next.js site to a public URL with Vercel.
+        </p>
+      </a>
+    </div>
+  </main>
+</div>
+`;

__tests__/index.test.jsx

@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Home from '../pages/index'
+
+describe('Home', () => {
+  it('renders a heading', () => {
+    render(<Home />)
+
+    const heading = screen.getByRole('heading', {
+      name: /welcome to next\.js!/i,
+    })
+
+    expect(heading).toBeInTheDocument()
+  })
+})

__tests__/snapshot.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Index from '../pages/index'
+
+it('renders homepage unchanged', () => {
+  const tree = renderer.create(<Index />).toJSON()
+  expect(tree).toMatchSnapshot()
+})

jest.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+  ],
+  moduleNameMapper: {
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // Handle CSS imports (without CSS modules)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // Handle image imports
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
+
+    // Handle module aliases
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+}

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}