Use recommended pattern in testing example (#28404)

* Use recommended pattern in testing example

Since the official linter for testing library, `eslint-plugin-testing-library` recommends using `screen` to write queries, this MR updates the testing library example to follow the pattern recommended by the linter.

> DOM Testing Library (and other Testing Library frameworks built on top of it) exports a screen object which has every query (and a debug method). This works better with autocomplete and makes each test a little simpler to write and maintain.

> This rule aims to force writing tests using built-in queries directly from screen object rather than destructuring them from render result. Given the screen component does not expose utility methods such as rerender() or the container property, it is correct to use the render returned value in those scenarios.

See the `prefer-screen-queries` rules docs for more info: https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md

* Update devDependencies

* Install and configure test linting

* Use recommended pattern in test

* Update test names for consistency

* Update docs

* Set jest environment in each file

* Use root true in `with-jest` eslint config

* Ensure nested .eslintrcs are not loaded for repo lint

Co-authored-by: jj@jjsweb.site <jj@jjsweb.site>

Author: htunnicliff

.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/__tests__/testing-library.js

@@ -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"
   }
 }

examples/with-jest/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 .",

package.json

@@ -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/client-navigation/pages/nav/pass-href-prop.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 {