From ae3b695e9a5bebe08fba4bcc1d00d20408d6f4d2 Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Tue, 17 Aug 2021 18:30:08 +0100 Subject: [PATCH 01/10] Fix multiline comments --- docs/testing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index fc9ebab89250e38..5bcbfe3e7f0aadc 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -166,21 +166,21 @@ module.exports = { '!**/node_modules/**', ], moduleNameMapper: { - // Handle CSS imports (with CSS modules) - // https://jestjs.io/docs/webpack#mocking-css-modules + /* Handle CSS imports (with CSS modules) + https://jestjs.io/docs/webpack#mocking-css-modules */ '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy', // Handle CSS imports (without CSS modules) '^.+\\.(css|sass|scss)$': '/__mocks__/styleMock.js', - // Handle image imports - // https://jestjs.io/docs/webpack#handling-static-assets + /* Handle image imports + https://jestjs.io/docs/webpack#handling-static-assets */ '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '/__mocks__/fileMock.js', }, testPathIgnorePatterns: ['/node_modules/', '/.next/'], transform: { - // Use babel-jest to transpile tests with the next/babel preset - // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object + /* Use babel-jest to transpile tests with the next/babel preset + https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */ '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }], }, transformIgnorePatterns: [ From f401ba89142e31d06a92b17f2d8b0ec187263f5e Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Tue, 17 Aug 2021 18:30:33 +0100 Subject: [PATCH 02/10] Minor text fixes --- docs/testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index 5bcbfe3e7f0aadc..ebaeb02019335f3 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -134,7 +134,7 @@ You can learn more about Cypress and Continuous Integration from these resources ## Jest and React Testing Library -Jest and React Testing Library are frequently used together for Unit Testing. +Jest and React Testing Library are frequently used together for **Unit Testing**. ### Quickstart @@ -332,6 +332,6 @@ For more information on what to read next, we recommend:
Test Environment Variables - Learn more test environments. + Learn more about the test environment.
From 42745f06c8e5a56dba85846508b95fd37dc89393 Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Tue, 17 Aug 2021 18:31:46 +0100 Subject: [PATCH 03/10] Add description --- docs/testing.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/testing.md b/docs/testing.md index ebaeb02019335f3..def271cb70e48e1 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -1,3 +1,7 @@ +--- +description: Learn how to set up Next.js with three commonly used testing tools — Cypress, Jest and React Testing Library. +--- + # Testing
From abf2f05d30f862c8254020fd83578a311f0eb7d7 Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Fri, 20 Aug 2021 17:31:05 +0100 Subject: [PATCH 04/10] Update jest and related packages to latest version --- examples/with-jest/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json index a208d0c205f4f2f..fbdc3503a43af71 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", + "@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": "^25.1.0", + "jest": "^27.0.6", "react-test-renderer": "^17.0.2" } } From 2330d1e9c12b669fcd81f558aa1b4595fbf51fdc Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Fri, 20 Aug 2021 17:32:05 +0100 Subject: [PATCH 05/10] Configure testing environment for testing-library --- examples/with-jest/__tests__/testing-library.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/with-jest/__tests__/testing-library.js b/examples/with-jest/__tests__/testing-library.js index 333e1cb9fe622eb..4e56922fcecf634 100644 --- a/examples/with-jest/__tests__/testing-library.js +++ b/examples/with-jest/__tests__/testing-library.js @@ -1,3 +1,7 @@ +/** + * @jest-environment jsdom + */ + import React from 'react' import { render } from '@testing-library/react' import Index from '../pages/index' From 7b8ed3369b78565d2dce21476f8d2447fd1ceaae Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Fri, 20 Aug 2021 18:31:47 +0100 Subject: [PATCH 06/10] Add note about Jest and RTL testing environment configuration --- docs/testing.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/testing.md b/docs/testing.md index 76fa33dd3da45c9..537bbed83564249 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -281,6 +281,11 @@ For example, we can add a test to check if the `` component successfull ```jsx // __tests__/testing-library.js + +/** + * @jest-environment jsdom + */ + import React from 'react' import { render } from '@testing-library/react' import Index from '../pages/index' @@ -298,6 +303,8 @@ describe('App', () => { }) ``` +> **Note**: The `@jest-environment jsdom` comment above configures the testing environment as `jsdom` inside test file because React Testing Library uses DOM elements like `document.body` which will not work in Jest's default `node` testing environment. Alternatively, you can also set the `jsdom` environment globally by adding the Jest configuration option: `"testEnvironment": "jsdom"` in `jest.config.js`. + Optionally, add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `` component: ```jsx From f10a1f39dec2903e3fb8b24d1390b029ceb018ae Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Mon, 23 Aug 2021 17:57:36 +0100 Subject: [PATCH 07/10] Update docs/testing.md Co-authored-by: Lee Robinson --- docs/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/testing.md b/docs/testing.md index 537bbed83564249..924d55934ee285c 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -1,5 +1,5 @@ --- -description: Learn how to set up Next.js with three commonly used testing tools — Cypress, Jest and React Testing Library. +description: Learn how to set up Next.js with three commonly used testing tools — Cypress, Jest, and React Testing Library. --- # Testing From 91adc688e279e86556cf255b446b77bc12680da0 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Mon, 23 Aug 2021 17:58:03 +0100 Subject: [PATCH 08/10] Update docs/testing.md Co-authored-by: Lee Robinson --- docs/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/testing.md b/docs/testing.md index 924d55934ee285c..4762853f7409b74 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -344,6 +344,6 @@ For more information on what to read next, we recommend:
Test Environment Variables - Learn more about the test environment. + Learn more about the test environment variables.
From 901717206084d60e668c6b94616679b4846afe7a Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Mon, 23 Aug 2021 17:58:14 +0100 Subject: [PATCH 09/10] Update docs/testing.md Co-authored-by: Lee Robinson --- docs/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/testing.md b/docs/testing.md index 4762853f7409b74..8821cb24884bfc4 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -303,7 +303,7 @@ describe('App', () => { }) ``` -> **Note**: The `@jest-environment jsdom` comment above configures the testing environment as `jsdom` inside test file because React Testing Library uses DOM elements like `document.body` which will not work in Jest's default `node` testing environment. Alternatively, you can also set the `jsdom` environment globally by adding the Jest configuration option: `"testEnvironment": "jsdom"` in `jest.config.js`. +> **Note**: The `@jest-environment jsdom` comment above configures the testing environment as `jsdom` inside the test file because React Testing Library uses DOM elements like `document.body` which will not work in Jest's default `node` testing environment. Alternatively, you can also set the `jsdom` environment globally by adding the Jest configuration option: `"testEnvironment": "jsdom"` in `jest.config.js`. Optionally, add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `` component: From 3844d5c21fd3a221df16b6ab4ffa12b62749864f Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Thu, 26 Aug 2021 16:52:47 +0100 Subject: [PATCH 10/10] Resolve merge conflicts --- docs/testing.md | 2 +- .../with-jest/__tests__/testing-library.js | 19 ------------------- examples/with-jest/package.json | 16 ++++++++++------ 3 files changed, 11 insertions(+), 26 deletions(-) delete mode 100644 examples/with-jest/__tests__/testing-library.js diff --git a/docs/testing.md b/docs/testing.md index 8821cb24884bfc4..d3f95040fc44446 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -280,7 +280,7 @@ 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 /** * @jest-environment jsdom diff --git a/examples/with-jest/__tests__/testing-library.js b/examples/with-jest/__tests__/testing-library.js deleted file mode 100644 index 4e56922fcecf634..000000000000000 --- a/examples/with-jest/__tests__/testing-library.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @jest-environment jsdom - */ - -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 fbdc3503a43af71..66bf05d113d6ba2 100644 --- a/examples/with-jest/package.json +++ b/examples/with-jest/package.json @@ -13,11 +13,15 @@ "react-dom": "^17.0.2" }, "devDependencies": { - "@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" + "@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" } }