From 81fc57a0de0cc3dcc53c4d938df814ab2aad05c4 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Sun, 22 Aug 2021 21:08:25 -0700 Subject: [PATCH 1/9] 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 --- docs/testing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index bce219228d32c..86ca6f5c4604c 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -278,14 +278,14 @@ For example, we can add a test to check if the `` component successfull ```jsx // __tests__/testing-library.js import React from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import Index from '../pages/index' describe('App', () => { it('renders a heading', () => { - const { getByRole } = render() + render() - const heading = getByRole('heading', { + const heading = screen.getByRole('heading', { name: /welcome to next\.js!/i, }) From c74d902b7a6d5c361b804e0a99fbaa5ae669c327 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Mon, 23 Aug 2021 09:12:33 -0700 Subject: [PATCH 2/9] Update devDependencies --- examples/with-jest/jest.config.js | 1 + examples/with-jest/package.json | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/examples/with-jest/jest.config.js b/examples/with-jest/jest.config.js index 15c4717b8e122..7948f054c2d74 100644 --- a/examples/with-jest/jest.config.js +++ b/examples/with-jest/jest.config.js @@ -20,6 +20,7 @@ module.exports = { '^@/components/(.*)$': '/components/$1', }, setupFilesAfterEnv: ['/jest.setup.js'], + testEnvironment: "jsdom", testPathIgnorePatterns: ['/node_modules/', '/.next/'], transform: { // Use babel-jest to transpile tests with the next/babel preset diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json index a208d0c205f4f..4244b7a042191 100644 --- a/examples/with-jest/package.json +++ b/examples/with-jest/package.json @@ -13,11 +13,11 @@ "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", + "babel-jest": "27.0.6", + "identity-obj-proxy": "3.0.0", + "jest": "27.0.6", + "react-test-renderer": "17.0.2" } } From d4bc8c702c7ed22d893b05b4db551b9e46940021 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Mon, 23 Aug 2021 09:32:36 -0700 Subject: [PATCH 3/9] Install and configure test linting --- examples/with-jest/.eslintrc.json | 14 ++++++++++++++ examples/with-jest/package.json | 5 +++++ 2 files changed, 19 insertions(+) create mode 100644 examples/with-jest/.eslintrc.json diff --git a/examples/with-jest/.eslintrc.json b/examples/with-jest/.eslintrc.json new file mode 100644 index 0000000000000..29571eca03b8a --- /dev/null +++ b/examples/with-jest/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "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"] + } + ] +} diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json index 4244b7a042191..eb77b739d3e5e 100644 --- a/examples/with-jest/package.json +++ b/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", @@ -15,7 +16,11 @@ "devDependencies": { "@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" From 9aefc344d26bf7b143b500301d54c9f96e8d3baa Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Mon, 23 Aug 2021 09:33:17 -0700 Subject: [PATCH 4/9] Use recommended pattern in test --- examples/with-jest/__tests__/testing-library.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/with-jest/__tests__/testing-library.js b/examples/with-jest/__tests__/testing-library.js index 333e1cb9fe622..469b1d9ffc6f7 100644 --- a/examples/with-jest/__tests__/testing-library.js +++ b/examples/with-jest/__tests__/testing-library.js @@ -1,12 +1,12 @@ import React from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import Index from '../pages/index' describe('App', () => { it('renders a heading', () => { - const { getByRole } = render() + render() - const heading = getByRole('heading', { + const heading = screen.getByRole('heading', { name: /welcome to next\.js!/i, }) From 3bab0ecc64fa9723a4be0563842dad1cb0cb96bd Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Mon, 23 Aug 2021 09:35:53 -0700 Subject: [PATCH 5/9] Update test names for consistency --- .../__tests__/{testing-library.js => index.test.jsx} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename examples/with-jest/__tests__/{testing-library.js => index.test.jsx} (76%) diff --git a/examples/with-jest/__tests__/testing-library.js b/examples/with-jest/__tests__/index.test.jsx similarity index 76% rename from examples/with-jest/__tests__/testing-library.js rename to examples/with-jest/__tests__/index.test.jsx index 469b1d9ffc6f7..c908c8499ab54 100644 --- a/examples/with-jest/__tests__/testing-library.js +++ b/examples/with-jest/__tests__/index.test.jsx @@ -1,10 +1,10 @@ import React from 'react' import { render, screen } from '@testing-library/react' -import Index from '../pages/index' +import Home from '../pages/index' -describe('App', () => { +describe('Home', () => { it('renders a heading', () => { - render() + render() const heading = screen.getByRole('heading', { name: /welcome to next\.js!/i, From 9b5d6d32c291b8a9065848d0f9afe6b9fb494af6 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Mon, 23 Aug 2021 09:37:52 -0700 Subject: [PATCH 6/9] Update docs --- docs/testing.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index 86ca6f5c4604c..46ac14d8a1778 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -179,6 +179,7 @@ module.exports = { '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '/__mocks__/fileMock.js', }, testPathIgnorePatterns: ['/node_modules/', '/.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,14 +277,14 @@ 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 `` component successfully renders a heading: ```jsx -// __tests__/testing-library.js +// __tests__/index.test.jsx import React from 'react' import { render, screen } from '@testing-library/react' -import Index from '../pages/index' +import Home from '../pages/index' -describe('App', () => { +describe('Home', () => { it('renders a heading', () => { - render() + render() const heading = screen.getByRole('heading', { name: /welcome to next\.js!/i, From dd211d4f3b3c98ca7831267703506e5e86651400 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Mon, 23 Aug 2021 11:27:17 -0700 Subject: [PATCH 7/9] Set jest environment in each file --- examples/with-jest/__tests__/index.test.jsx | 4 ++++ examples/with-jest/jest.config.js | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/with-jest/__tests__/index.test.jsx b/examples/with-jest/__tests__/index.test.jsx index c908c8499ab54..b2fc240afb8f6 100644 --- a/examples/with-jest/__tests__/index.test.jsx +++ b/examples/with-jest/__tests__/index.test.jsx @@ -1,3 +1,7 @@ +/** + * @jest-environment jsdom + */ + import React from 'react' import { render, screen } from '@testing-library/react' import Home from '../pages/index' diff --git a/examples/with-jest/jest.config.js b/examples/with-jest/jest.config.js index 7948f054c2d74..15c4717b8e122 100644 --- a/examples/with-jest/jest.config.js +++ b/examples/with-jest/jest.config.js @@ -20,7 +20,6 @@ module.exports = { '^@/components/(.*)$': '/components/$1', }, setupFilesAfterEnv: ['/jest.setup.js'], - testEnvironment: "jsdom", testPathIgnorePatterns: ['/node_modules/', '/.next/'], transform: { // Use babel-jest to transpile tests with the next/babel preset From 497d698e18b161fbe7cfce952d095be97815f069 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Tue, 24 Aug 2021 21:58:39 -0700 Subject: [PATCH 8/9] Use root true in `with-jest` eslint config --- examples/with-jest/.eslintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/with-jest/.eslintrc.json b/examples/with-jest/.eslintrc.json index 29571eca03b8a..4f67f8cbc08db 100644 --- a/examples/with-jest/.eslintrc.json +++ b/examples/with-jest/.eslintrc.json @@ -1,4 +1,5 @@ { + "root": true, "extends": ["next/core-web-vitals"], "plugins": ["testing-library"], "overrides": [ From 8bb1152959578f7dc518c24036b20fa9b33223bd Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Wed, 25 Aug 2021 11:31:21 -0500 Subject: [PATCH 9/9] Ensure nested .eslintrcs are not loaded for repo lint --- .eslintignore | 1 + package.json | 4 ++-- .../integration/client-navigation/pages/nav/pass-href-prop.js | 1 - test/integration/document-head-warnings/pages/_document.js | 2 -- 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/.eslintignore b/.eslintignore index 02f6d89cd328d..22d834344e383 100644 --- a/.eslintignore +++ b/.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 diff --git a/package.json b/package.json index bd737c8d98c0e..abbb81aef8449 100644 --- a/package.json +++ b/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 .", diff --git a/test/integration/client-navigation/pages/nav/pass-href-prop.js b/test/integration/client-navigation/pages/nav/pass-href-prop.js index 473285bf89823..ce9acc1ef6df3 100644 --- a/test/integration/client-navigation/pages/nav/pass-href-prop.js +++ b/test/integration/client-navigation/pages/nav/pass-href-prop.js @@ -18,7 +18,6 @@ export default () => ( Will redirect as an `a` tag - {/* eslint-disable-next-line @next/next/link-passhref */} Will not redirect as an `a` tag diff --git a/test/integration/document-head-warnings/pages/_document.js b/test/integration/document-head-warnings/pages/_document.js index a9607538a830a..8c94d830bb60b 100644 --- a/test/integration/document-head-warnings/pages/_document.js +++ b/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 {