feat: added nextjs example (#920)

* feat: added nextjs example * chore: update * chore: simplify nextjs demo Co-authored-by: Rob Caldecott <robert.caldecott@keyloop.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
vitest-dev · Mar 13, 2022 · 2e8a3b1 · 2e8a3b1
1 parent 1a2dfd8
commit 2e8a3b1
Show file tree

Hide file tree

Showing 10 changed files with 404 additions and 125 deletions.
diff --git a/examples/nextjs/__tests__/Home.test.tsx b/examples/nextjs/__tests__/Home.test.tsx
@@ -0,0 +1,13 @@
+import { expect, test } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import Home from '../pages'
+
+test('home', () => {
+  render(<Home />)
+  const main = within(screen.getByRole('main'))
+  expect(main.getByRole('heading', { level: 1, name: /welcome to next\.js!/i })).toBeDefined()
+
+  const footer = within(screen.getByRole('contentinfo'))
+  const link = within(footer.getByRole('link'))
+  expect(link.getByRole('img', { name: /vercel logo/i })).toBeDefined()
+})
diff --git a/examples/nextjs/next-env.d.ts b/examples/nextjs/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@vitest/nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "next": "12.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^12.1.3",
+    "@types/node": "17.0.21",
+    "@types/react": "17.0.40",
+    "@vitejs/plugin-react": "1.2.0",
+    "jsdom": "^19.0.0",
+    "typescript": "4.6.2",
+    "vitest": "latest"
+  }
+}
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+
+const Home: NextPage = () =>
+  <>
+    <Head>
+      <title>Create Next App</title>
+      <meta name="description" content="Generated by create next app" />
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    <main>
+      <h1>
+        Welcome to Next.js!
+      </h1>
+
+      <footer>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span>
+            <Image src="https://assets.vercel.com/image/upload/q_auto/front/favicon/vercel/57x57.png" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </main>
+  </>
+
+export default Home
diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css
@@ -0,0 +1,16 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/nextjs/vitest.config.ts b/examples/nextjs/vitest.config.ts
@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+  },
+})