Use recommended pattern in testing example

.eslintignore

@@ -8,6 +8,7 @@ examples/with-typescript-eslint-jest/**
 examples/with-kea/**
 examples/with-custom-babel-config/**
 examples/with-flow/**
+examples/with-jest/**
 examples/with-mobx-state-tree/**
 examples/with-mobx/**
 packages/next/bundles/webpack/packages/*.runtime.js

docs/testing.md

@@ -179,6 +179,7 @@ module.exports = {
     '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
   },
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  testEnvironment: 'jsdom',
   transform: {
     // Use babel-jest to transpile tests with the next/babel preset
     // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
@@ -276,16 +277,16 @@ Your project is now ready to run tests. Follow Jests convention by adding tests
 For example, we can add a test to check if the `<Index />` component successfully renders a heading:
 
 ```jsx
-// __tests__/testing-library.js
+// __tests__/index.test.jsx
 import React from 'react'
-import { render } from '@testing-library/react'
-import Index from '../pages/index'
+import { render, screen } from '@testing-library/react'
+import Home from '../pages/index'
 
-describe('App', () => {
+describe('Home', () => {
   it('renders a heading', () => {
-    const { getByRole } = render(<Index />)
+    render(<Home />)
 
-    const heading = getByRole('heading', {
+    const heading = screen.getByRole('heading', {
       name: /welcome to next\.js!/i,
     })
 

examples/with-jest/.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"]
+    }
+  ]
+}

examples/with-jest/__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()
+  })
+})

examples/with-jest/package.json

@@ -2,6 +2,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "lint": "next lint",
     "build": "next build",
     "start": "next start",
     "test": "jest --watch",
@@ -13,11 +14,15 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.1.0",
-    "@testing-library/react": "^9.4.0",
-    "babel-jest": "^25.1.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.1.0",
-    "react-test-renderer": "^17.0.2"
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/user-event": "13.2.1",
+    "babel-jest": "27.0.6",
+    "eslint": "7.32.0",
+    "eslint-config-next": "latest",
+    "eslint-plugin-testing-library": "4.11.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "27.0.6",
+    "react-test-renderer": "17.0.2"
   }
 }

package.json

@@ -19,10 +19,10 @@
     "git-reset": "git reset --hard HEAD",
     "git-clean": "git clean -d -x -e node_modules -e packages -f",
     "lint-typescript": "lerna run typescript",
-    "lint-eslint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0",
+    "lint-eslint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0 --config .eslintrc.json --no-eslintrc",
     "lint-no-typescript": "run-p prettier-check lint-eslint",
     "lint": "run-p test-types lint-typescript prettier-check lint-eslint lint-language",
-    "lint-fix": "yarn prettier-fix && eslint . --ext js,jsx,ts,tsx --fix --max-warnings=0",
+    "lint-fix": "yarn prettier-fix && eslint . --ext js,jsx,ts,tsx --fix --max-warnings=0 --config .eslintrc.json --no-eslintrc",
     "lint-language": "alex .",
     "prettier-check": "prettier --check .",
     "prettier-fix": "prettier --write .",

test/integration/client-navigation/pages/nav/pass-href-prop.js

@@ -18,7 +18,6 @@ export default () => (
       <FakeA id="with-href">Will redirect as an `a` tag</FakeA>
     </Link>
 
-    {/* eslint-disable-next-line @next/next/link-passhref */}
     <Link href="/nav">
       <FakeA id="without-href">Will not redirect as an `a` tag</FakeA>
     </Link>

test/integration/document-head-warnings/pages/_document.js

@@ -1,5 +1,3 @@
-/* eslint-disable @next/next/no-title-in-document-head */
-
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {