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/docs/testing.md b/docs/testing.md index bce219228d32c..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,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 `` 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() + render() - const heading = getByRole('heading', { + const heading = screen.getByRole('heading', { name: /welcome to next\.js!/i, }) diff --git a/examples/with-jest/.eslintrc.json b/examples/with-jest/.eslintrc.json new file mode 100644 index 0000000000000..4f67f8cbc08db --- /dev/null +++ b/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"] + } + ] +} diff --git a/examples/with-jest/__tests__/index.test.jsx b/examples/with-jest/__tests__/index.test.jsx new file mode 100644 index 0000000000000..b2fc240afb8f6 --- /dev/null +++ b/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() + + const heading = screen.getByRole('heading', { + name: /welcome to next\.js!/i, + }) + + expect(heading).toBeInTheDocument() + }) +}) diff --git a/examples/with-jest/__tests__/testing-library.js b/examples/with-jest/__tests__/testing-library.js deleted file mode 100644 index 333e1cb9fe622..0000000000000 --- a/examples/with-jest/__tests__/testing-library.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import { render } from '@testing-library/react' -import Index from '../pages/index' - -describe('App', () => { - it('renders a heading', () => { - const { getByRole } = render() - - const heading = getByRole('heading', { - name: /welcome to next\.js!/i, - }) - - expect(heading).toBeInTheDocument() - }) -}) diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json index a208d0c205f4f..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", @@ -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" } } 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 {