Initial commit

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,2 +1,35 @@
-# continuous-integration
-Sample project to set up continuous integration
+# 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. This example also shows how to use Jest with the App Router and React Server Components.
+
+> **Note:** Since tests can be co-located alongside other files inside the App Router, we have placed those tests in `app/` to demonstrate this behavior (which is different than `pages/`). You can still place all tests in `__tests__` if you prefer.
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-jest&project-name=with-jest&repository-name=with-jest)
+
+## 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
+```
+
+```bash
+yarn create next-app --example with-jest with-jest-app
+```
+
+```bash
+pnpm create next-app --example with-jest with-jest-app
+```
+
+## Running Tests
+
+```bash
+npm test
+```

__tests__/__snapshots__/snapshot.tsx.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders homepage unchanged 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <main>
+      <h1
+        class="title"
+      >
+        Welcome to 
+        <a
+          href="https://nextjs.org"
+        >
+          Next.js!
+        </a>
+      </h1>
+      <p
+        class="description"
+      >
+        Get started by editing 
+        <code>
+          pages/index.js
+        </code>
+      </p>
+      <div
+        class="grid"
+      >
+        <a
+          class="card"
+          href="https://nextjs.org/docs"
+        >
+          <h3>
+            Documentation →
+          </h3>
+          <p>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+        <a
+          class="card"
+          href="https://nextjs.org/learn"
+        >
+          <h3>
+            Learn →
+          </h3>
+          <p>
+            Learn about Next.js in an interactive course with quizzes!
+          </p>
+        </a>
+        <a
+          class="card"
+          href="https://github.com/vercel/next.js/tree/canary/examples"
+        >
+          <h3>
+            Examples →
+          </h3>
+          <p>
+            Discover and deploy boilerplate example Next.js projects.
+          </p>
+        </a>
+        <a
+          class="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>
+    <footer
+      class="footer"
+    >
+      <a
+        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Powered by
+         
+        <span
+          class="logo"
+        >
+          <img
+            alt="Vercel Logo"
+            data-nimg="1"
+            decoding="async"
+            height="16"
+            loading="lazy"
+            src="/vercel.svg"
+            style="color: transparent;"
+            width="72"
+          />
+        </span>
+      </a>
+    </footer>
+  </div>
+</div>
+`;

__tests__/index.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from "@testing-library/react";
+import Home from "@/pages/home/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.tsx

@@ -0,0 +1,10 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from "@testing-library/react";
+import Home from "@/pages/home/index";
+
+it("renders homepage unchanged", () => {
+  const { container } = render(<Home />);
+  expect(container).toMatchSnapshot();
+});

app/blog/[slug]/page.test.tsx

@@ -0,0 +1,11 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Page from "./page";
+
+it("App Router: Works with dynamic route segments", () => {
+  render(<Page params={{ slug: "Test" }} />);
+  expect(screen.getByRole("heading")).toHaveTextContent("Slug: Test");
+});

app/blog/[slug]/page.tsx

@@ -0,0 +1,13 @@
+type Params = {
+  params: {
+    slug: string;
+  };
+};
+
+export async function generateMetadata({ params }: Params) {
+  return { title: `Post: ${params.slug}` };
+}
+
+export default function Page({ params }: Params) {
+  return <h1>Slug: {params.slug}</h1>;
+}

app/counter.test.tsx

@@ -0,0 +1,12 @@
+/**
+ * @jest-environment jsdom
+ */
+import { fireEvent, render, screen } from "@testing-library/react";
+import Counter from "./counter";
+
+it("App Router: Works with Client Components (React State)", () => {
+  render(<Counter />);
+  expect(screen.getByRole("heading")).toHaveTextContent("0");
+  fireEvent.click(screen.getByRole("button"));
+  expect(screen.getByRole("heading")).toHaveTextContent("1");
+});

app/counter.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <h2>{count}</h2>
+      <button type="button" onClick={() => setCount(count + 1)}>
+        +
+      </button>
+    </>
+  );
+}

app/layout.tsx

@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.test.tsx

@@ -0,0 +1,10 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from "@testing-library/react";
+import Page from "./page";
+
+it("App Router: Works with Server Components", () => {
+  render(<Page />);
+  expect(screen.getByRole("heading")).toHaveTextContent("App Router");
+});

app/page.tsx

@@ -0,0 +1,7 @@
+export const metadata = {
+  title: "App Router",
+};
+
+export default function Page() {
+  return <h1>App Router</h1>;
+}

app/utils/add.test.ts

@@ -0,0 +1,5 @@
+import { add } from "./add";
+
+test("Test functions that import server-only", () => {
+  expect(add(1, 2)).toBe(3);
+});

app/utils/add.ts

@@ -0,0 +1,5 @@
+import "server-only";
+
+export function add(a: number, b: number) {
+  return a + b;
+}

jest.config.js

@@ -0,0 +1,15 @@
+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
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testEnvironment: "jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,2 @@
+// Learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";