├── jest.setup.js ├── src └── app │ ├── favicon.ico │ ├── layout.tsx │ ├── globals.css │ └── page.tsx ├── next.config.js ├── postcss.config.js ├── .eslintrc.json ├── .gitignore ├── tailwind.config.ts ├── public ├── vercel.svg └── next.svg ├── jest.config.js ├── tsconfig.json ├── __tests__ └── Home.test.tsx ├── package.json └── README.md /jest.setup.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect' -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/next-testing-intro/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next/core-web-vitals", 4 | "plugin:testing-library/react", 5 | "plugin:jest-dom/recommended" 6 | ] 7 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css' 2 | import type { Metadata } from 'next' 3 | import { Inter } from 'next/font/google' 4 | 5 | const inter = Inter({ subsets: ['latin'] }) 6 | 7 | export const metadata: Metadata = { 8 | title: 'Create Next App', 9 | description: 'Generated by create next app', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | content: [ 5 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './src/components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './src/app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 13 | 'gradient-conic': 14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | } 20 | export default config 21 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const nextJest = require('next/jest') 2 | 3 | const createJestConfig = nextJest({ 4 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment 5 | dir: './', 6 | }) 7 | 8 | // Add any custom config to be passed to Jest 9 | /** @type {import('jest').Config} */ 10 | const config = { 11 | // Add more setup options before each test is run 12 | setupFilesAfterEnv: ['/jest.setup.js'], 13 | testEnvironment: 'jest-environment-jsdom', 14 | preset: 'ts-jest', 15 | } 16 | 17 | // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async 18 | module.exports = createJestConfig(config) -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /__tests__/Home.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react' 2 | import Home from '@/app/page' 3 | 4 | describe('Home', () => { 5 | it('should have Docs text', () => { 6 | render() // ARRANGE 7 | 8 | const myElem = screen.getByText('Docs') // ACT 9 | 10 | expect(myElem).toBeInTheDocument() // ASSERT 11 | }) 12 | 13 | it('should contain the text "information"', () => { 14 | render() // ARRANGE 15 | 16 | const myElem = screen.getByText(/information/i) // ACT 17 | 18 | expect(myElem).toBeInTheDocument() // ASSERT 19 | }) 20 | 21 | it('should have a heading', () => { 22 | render() // ARRANGE 23 | 24 | const myElem = screen.getByRole('heading', { 25 | name: 'Learn' 26 | }) // ACT 27 | 28 | expect(myElem).toBeInTheDocument() // ASSERT 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-testing-intro", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "test": "jest", 11 | "test:watch": "jest --watchAll" 12 | }, 13 | "dependencies": { 14 | "@types/node": "20.5.0", 15 | "@types/react": "18.2.20", 16 | "@types/react-dom": "18.2.7", 17 | "autoprefixer": "10.4.15", 18 | "eslint": "8.47.0", 19 | "eslint-config-next": "13.4.17", 20 | "next": "^13.4.10", 21 | "postcss": "8.4.28", 22 | "react": "18.2.0", 23 | "react-dom": "18.2.0", 24 | "tailwindcss": "3.3.3", 25 | "typescript": "5.1.6" 26 | }, 27 | "devDependencies": { 28 | "@testing-library/jest-dom": "^5.16.5", 29 | "@testing-library/react": "^14.0.0", 30 | "@testing-library/user-event": "^14.4.3", 31 | "eslint-plugin-jest-dom": "^5.0.2", 32 | "eslint-plugin-testing-library": "^6.0.0", 33 | "jest": "^29.6.2", 34 | "jest-environment-jsdom": "^29.6.2", 35 | "ts-jest": "^29.1.1" 36 | } 37 | } -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # "Intro to Testing in Next.js" 2 | 3 | ## with Jest, React Testing Library, TypeScript 4 | 5 | --- 6 | 7 | ### Author Links 8 | 9 | 👋 Hello, I'm Dave Gray. 10 | 11 | 👉 [My Courses](https://courses.davegray.codes/) 12 | 13 | ✅ [Check out my YouTube Channel with hundreds of tutorials](https://www.youtube.com/DaveGrayTeachesCode). 14 | 15 | 🚩 [Subscribe to my channel](https://bit.ly/3nGHmNn) 16 | 17 | ☕ [Buy Me A Coffee](https://buymeacoffee.com/DaveGray) 18 | 19 | 🚀 Follow Me: 20 | 21 | - [Twitter](https://twitter.com/yesdavidgray) 22 | - [LinkedIn](https://www.linkedin.com/in/davidagray/) 23 | - [Blog](https://yesdavidgray.com) 24 | - [Reddit](https://www.reddit.com/user/DaveOnEleven) 25 | 26 | --- 27 | 28 | ### Description 29 | 30 | 📺 [YouTube Video](https://youtu.be/AS79oJ3Fcf0) for this repository. 31 | 32 | ### 📚 References 33 | - 🔗 [Next.js Official Site](https://nextjs.org/) 34 | - 🔗 [TypeScript Official Site](https://www.typescriptlang.org/) 35 | - 🔗 [Jest Official Site](https://jestjs.io/) 36 | - 🔗 [React Testing Library Official Site](https://testing-library.com/docs/react-testing-library/intro) 37 | 38 | --- 39 | 40 | ### ⚙ Free Web Dev Tools 41 | - 🔗 [Google Chrome Web Browser](https://google.com/chrome/) 42 | - 🔗 [Visual Studio Code (aka VS Code)](https://code.visualstudio.com/) 43 | - 🔗 [ES7 React Snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 44 | 45 | --- 46 | 47 | ### 🎓 Academic Honesty 48 | 49 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiarism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/). -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |
7 |

8 | Get started by editing  9 | src/app/page.tsx 10 |

11 | 29 |
30 | 31 |
32 | Next.js Logo 40 |
41 | 42 | 108 |
109 | ) 110 | } 111 | --------------------------------------------------------------------------------