+)
+
+export default Home
diff --git a/examples/with-jest-babel/pages/index.module.css b/examples/with-jest-babel/pages/index.module.css
new file mode 100644
index 0000000000000..d6754a34ab1df
--- /dev/null
+++ b/examples/with-jest-babel/pages/index.module.css
@@ -0,0 +1,82 @@
+.container {
+ min-height: 100vh;
+ padding: 0 0.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.title a {
+ color: #0070f3;
+ text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+ text-decoration: underline;
+}
+
+.title {
+ margin: 0;
+ line-height: 1.15;
+ font-size: 4rem;
+}
+
+.title,
+.description {
+ text-align: center;
+}
+
+.description {
+ line-height: 1.5;
+ font-size: 1.5rem;
+}
+
+.grid {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ max-width: 800px;
+ margin-top: 3rem;
+}
+
+.card {
+ margin: 1rem;
+ flex-basis: 45%;
+ padding: 1.5rem;
+ text-align: left;
+ color: inherit;
+ text-decoration: none;
+ border: 1px solid #eaeaea;
+ border-radius: 10px;
+ transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+ color: #0070f3;
+ border-color: #0070f3;
+}
+
+.card h3 {
+ margin: 0 0 1rem 0;
+ font-size: 1.5rem;
+}
+
+.card p {
+ margin: 0;
+ font-size: 1.25rem;
+ line-height: 1.5;
+}
+
+@media (max-width: 600px) {
+ .grid {
+ width: 100%;
+ flex-direction: column;
+ }
+}
diff --git a/examples/with-jest-babel/public/favicon.ico b/examples/with-jest-babel/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a
GIT binary patch
literal 15086
zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ
zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp
zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM
zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B
zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A
z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2
z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM
z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk
zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_
zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT}
zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv
zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO
zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z
zrOO{op^o*-
+
+
+
+
+
+
+
+
+
diff --git a/examples/with-jest-babel/styles/global.css b/examples/with-jest-babel/styles/global.css
new file mode 100644
index 0000000000000..0afcfbe32f1d0
--- /dev/null
+++ b/examples/with-jest-babel/styles/global.css
@@ -0,0 +1,53 @@
+html,
+body {
+ padding: 0;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+main {
+ padding: 5rem 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+footer {
+ width: 100%;
+ height: 100px;
+ border-top: 1px solid #eaeaea;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+footer img {
+ margin-left: 0.5rem;
+}
+
+footer a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+code {
+ background: #fafafa;
+ border-radius: 5px;
+ padding: 0.75rem;
+ font-size: 1.1rem;
+ font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+ Bitstream Vera Sans Mono, Courier New, monospace;
+}
From 04c45b56bdc11ef937a56a3652a5b0ee129c8477 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 16:35:03 +0000
Subject: [PATCH 02/27] Update README.md
---
examples/with-jest-babel/README.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/examples/with-jest-babel/README.md b/examples/with-jest-babel/README.md
index 1199feb5bf873..75a5fea2b5a85 100644
--- a/examples/with-jest-babel/README.md
+++ b/examples/with-jest-babel/README.md
@@ -1,6 +1,7 @@
# Next.js + Jest
-This example shows how to configure Jest to work with Next.js.
+This example shows how to configure Jest to work with Next.js and Babel. Since the release of Next.js 12, Next.js has in-built configuration for Jest with SWC. See the
+[with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) example for the latest implementation.
This includes Next.js' built-in support for Global CSS, CSS Modules, and TypeScript!
From c1c0988b23d1da73a0d420ca44d2053514d05309 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 16:43:46 +0000
Subject: [PATCH 03/27] Update jest.config.js for new example
---
examples/with-jest/jest.config.js | 38 ++++++++-----------------------
1 file changed, 10 insertions(+), 28 deletions(-)
diff --git a/examples/with-jest/jest.config.js b/examples/with-jest/jest.config.js
index eacc5d367f563..9d04dc06e68dc 100644
--- a/examples/with-jest/jest.config.js
+++ b/examples/with-jest/jest.config.js
@@ -1,33 +1,15 @@
-module.exports = {
- collectCoverageFrom: [
- '**/*.{js,jsx,ts,tsx}',
- '!**/*.d.ts',
- '!**/node_modules/**',
- ],
- moduleNameMapper: {
- // 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',
+const nextJest = require('next/jest')
- // Handle image imports
- // https://jestjs.io/docs/webpack#handling-static-assets
- '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `/__mocks__/fileMock.js`,
+// Provide the path to your Next.js app which will enable loading next.config.js and .env files
+const createJestConfig = nextJest()
- // Handle module aliases
- '^@/components/(.*)$': '/components/$1',
- },
+// Add any custom config you want to pass to Jest
+const customJestConfig = {
setupFilesAfterEnv: ['/jest.setup.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
- '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+ moduleNameMapper: {
+ // Handle module aliases, this will be automatically configured for you soon.
+ '^@/components/(.*)$': '/components/$1',
},
- transformIgnorePatterns: [
- '/node_modules/',
- '^.+\\.module\\.(css|sass|scss)$',
- ],
}
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)
From 67f2630f2c5f6718491d47214121d67a973455e5 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 16:45:00 +0000
Subject: [PATCH 04/27] Fix line break
---
examples/with-jest-babel/README.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/examples/with-jest-babel/README.md b/examples/with-jest-babel/README.md
index 75a5fea2b5a85..b0d4e63fde1b3 100644
--- a/examples/with-jest-babel/README.md
+++ b/examples/with-jest-babel/README.md
@@ -1,7 +1,6 @@
# Next.js + Jest
-This example shows how to configure Jest to work with Next.js and Babel. Since the release of Next.js 12, Next.js has in-built configuration for Jest with SWC. See the
-[with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) example for the latest implementation.
+This example shows how to configure Jest to work with Next.js and Babel. Since the release of Next.js 12, Next.js has in-built configuration for Jest with SWC. See the [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) example for the latest implementation.
This includes Next.js' built-in support for Global CSS, CSS Modules, and TypeScript!
From 026ba238ec68449d2cf9c9556359bf80fe3835f1 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 19:05:58 +0000
Subject: [PATCH 05/27] Delete mocks for SWC example
---
examples/with-jest/__mocks__/fileMock.js | 1 -
examples/with-jest/__mocks__/styleMock.js | 4 ----
2 files changed, 5 deletions(-)
delete mode 100644 examples/with-jest/__mocks__/fileMock.js
delete mode 100644 examples/with-jest/__mocks__/styleMock.js
diff --git a/examples/with-jest/__mocks__/fileMock.js b/examples/with-jest/__mocks__/fileMock.js
deleted file mode 100644
index 0e56c5b5f7655..0000000000000
--- a/examples/with-jest/__mocks__/fileMock.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = 'test-file-stub'
diff --git a/examples/with-jest/__mocks__/styleMock.js b/examples/with-jest/__mocks__/styleMock.js
deleted file mode 100644
index 8ad91008c30a0..0000000000000
--- a/examples/with-jest/__mocks__/styleMock.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// Mock CSS files.
-// If you're using CSS modules, this file can be deleted.
-
-module.exports = {}
From bc38c13d062a00615ca49c705a6a20ea36d8e25a Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 19:53:58 +0000
Subject: [PATCH 06/27] Add Jest docs link
---
examples/with-jest-babel/jest.config.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/examples/with-jest-babel/jest.config.js b/examples/with-jest-babel/jest.config.js
index eacc5d367f563..93f6fd3085b3d 100644
--- a/examples/with-jest-babel/jest.config.js
+++ b/examples/with-jest-babel/jest.config.js
@@ -1,3 +1,5 @@
+// You can learn more about each option below in the Jest docs: https://jestjs.io/docs/configuration.
+
module.exports = {
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
From b604725f710f0d30debd376f2c9fb6785ce13ee1 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 21:00:30 +0000
Subject: [PATCH 07/27] Remove unused package and update Jest
---
examples/with-jest/package.json | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json
index eb77b739d3e5e..451ddb1eeeef0 100644
--- a/examples/with-jest/package.json
+++ b/examples/with-jest/package.json
@@ -21,8 +21,7 @@
"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",
+ "jest": "27.3.1",
"react-test-renderer": "17.0.2"
}
}
From 9bcddd4c1d8c0ee68d2cdf90def3198362e572ce Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 21:03:22 +0000
Subject: [PATCH 08/27] Update docs
---
docs/testing.md | 82 ++++++++++++++++++++++++++++++++++---------------
1 file changed, 57 insertions(+), 25 deletions(-)
diff --git a/docs/testing.md b/docs/testing.md
index bda0fb9b6801d..536188ee8bbd9 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, Playwright, Jest, and React Testing Library.
---
# Testing
@@ -247,27 +247,59 @@ Jest and React Testing Library are frequently used together for **Unit Testing**
### Quickstart
-You can use `create-next-app` with the [with-jest example](https://github.com/vercel/next.js/tree/canary/examples/with-jest) to quickly get started with Jest and React Testing Library:
+You can use `create-next-app` with the [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) example to quickly get started with Jest and React Testing Library:
```bash
npx create-next-app@latest --example with-jest with-jest-app
```
-### Manual setup
+### Setting up Jest (with SWC)
+
+Since the release of (Next.js 12)[https://nextjs.org/blog/next-12], Next.js now has built-in configuration for Jest. This includes TypeScript support, auto mocking of stylesheets and images, and more.
-To manually set up Jest and React Testing Library, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` as well as some supporting packages:
+To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`.
```bash
-npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom identity-obj-proxy react-test-renderer
+npm install --save-dev jest @testing-library/react @testing-library/jest-dom react-test-renderer
```
-**Configuring Jest**
-
-Create a `jest.config.js` file in your project's root directory and add the following configuration options:
+Create a `jest.config.js` file in your project's root directory and add the following:
```jsx
// jest.config.js
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+ dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+ setupFilesAfterEnv: ['/jest.setup.js'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)
+```
+
+Under the hood, `next/jest` is automatically configuring Jest for you, including:
+
+- Auto mocking stylesheets (.css, .module.css, and their scss variants) and image imports
+- Setting up `transform` using SWC
+- Loading .env (and all variants) into process.env
+- Ignoring node_modules from test resolving and transforms
+- Ignoring .next from test resolving
+- Loading next.config.js for flags that enable experimental SWC transforms
+
+### Setting up Jest (with Babel)
+If you opt-out of SWC and use Babel instead. In addition to packages above, you will need to install the `babel-jest` and `identity-obj-proxy` packages, and manually configure Jest.
+
+Here are the recommended options to configure Jest for Next.js:
+
+```jsx
+// jest.config.js
module.exports = {
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
@@ -275,23 +307,26 @@ 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 */
- '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$':
- '/__mocks__/fileMock.js',
+ // Handle image imports
+ // https://jestjs.io/docs/webpack#handling-static-assets
+ '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `/__mocks__/fileMock.js`,
+
+ // Handle module aliases
+ '^@/components/(.*)$': '/components/$1',
},
+ setupFilesAfterEnv: ['/jest.setup.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 */
+ // 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: [
@@ -301,21 +336,19 @@ module.exports = {
}
```
-You can learn more about each option above in the [Jest docs](https://jestjs.io/docs/configuration).
+You can learn more about each configuration option in the [Jest docs](https://jestjs.io/docs/configuration).
**Handling stylesheets and image imports**
-These files aren't useful in tests but importing them may cause errors, so we will need to mock them. Create the mock files we referenced in the configuration above - `fileMock.js` and `styleMock.js` - inside a `__mocks__` directory:
+Styleheets and images aren't used in the tests but importing them may cause errors, so we will need to mock them. Create the mock files we referenced in the configuration above - `fileMock.js` and `styleMock.js` - inside a `__mocks__` directory:
```json
// __mocks__/fileMock.js
-
(module.exports = "test-file-stub")
```
```json
// __mocks__/styleMock.js
-
module.exports = {};
```
@@ -323,19 +356,17 @@ If you're running into the issue `"Failed to parse src "test-file-stub" on 'next
```json
// __mocks__/fileMock.js
-
(module.exports = "/test-file-stub")
```
For more information on handling static assets, please refer to the [Jest Docs](https://jestjs.io/docs/webpack#handling-static-assets).
-**Extend Jest with custom matchers**
+**Optional: Extend Jest with custom matchers**
`@testing-library/jest-dom` includes a set of convenient [custom matchers](https://github.com/testing-library/jest-dom#custom-matchers) such as `.toBeInTheDocument()` making it easier to write tests. You can import the custom matchers for every test by adding the following option to the Jest configuration file:
```json
// jest.config.js
-
setupFilesAfterEnv: ['/jest.setup.js']
```
@@ -343,13 +374,12 @@ Then, inside `jest.setup.js`, add the following import:
```jsx
// jest.setup.js
-
import '@testing-library/jest-dom/extend-expect'
```
If you need to add more setup options before each test, it's common to add them to the `jest.setup.js` file above.
-**Absolute Imports and Module Path Aliases**
+**Optional: Absolute Imports and Module Path Aliases**
If your project is using [Module Path Aliases](https://nextjs.org/docs/advanced-features/module-path-aliases), you will need to configure Jest to resolve the imports by matching the paths option in the `jsconfig.json` file with the `moduleNameMapper` option in the `jest.config.js` file. For example:
@@ -372,6 +402,8 @@ moduleNameMapper: {
}
```
+### Creating your tests:
+
**Add a test script to package.json**
Add the Jest executable in watch mode to the `package.json` scripts:
From cecfd4061c3eb9e1ef50dea1ad8f719ba049f07c Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 21:03:46 +0000
Subject: [PATCH 09/27] Update comments
---
examples/with-jest/jest.config.js | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/examples/with-jest/jest.config.js b/examples/with-jest/jest.config.js
index 9d04dc06e68dc..79e3eb86d9064 100644
--- a/examples/with-jest/jest.config.js
+++ b/examples/with-jest/jest.config.js
@@ -1,15 +1,18 @@
const nextJest = require('next/jest')
-// Provide the path to your Next.js app which will enable loading next.config.js and .env files
-const createJestConfig = nextJest()
+const createJestConfig = nextJest({
+ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+ dir: './',
+})
-// Add any custom config you want to pass to Jest
+// Add any custom config to be passed to Jest
const customJestConfig = {
setupFilesAfterEnv: ['/jest.setup.js'],
moduleNameMapper: {
- // Handle module aliases, this will be automatically configured for you soon.
+ // Handle module aliases (this will be automatically configured for you soon)
'^@/components/(.*)$': '/components/$1',
},
}
+
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
From 7b362b19bcd56c53ebbb45dfb6841c596ef347c9 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 21:30:31 +0000
Subject: [PATCH 10/27] Update testing.md
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 536188ee8bbd9..4dc1662428d27 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -294,7 +294,7 @@ Under the hood, `next/jest` is automatically configuring Jest for you, including
### Setting up Jest (with Babel)
-If you opt-out of SWC and use Babel instead. In addition to packages above, you will need to install the `babel-jest` and `identity-obj-proxy` packages, and manually configure Jest.
+If you opt out of SWC, in addition to the packages above, you will need to install the `babel-jest` and `identity-obj-proxy` packages, and manually configure Jest.
Here are the recommended options to configure Jest for Next.js:
From b8a4c3bac1ae268fa7977e9eb453eb84722636ff Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 19 Nov 2021 21:44:52 +0000
Subject: [PATCH 11/27] Clarify opt out sentence
---
docs/testing.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/testing.md b/docs/testing.md
index 4dc1662428d27..a92a8dd920845 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -255,7 +255,7 @@ npx create-next-app@latest --example with-jest with-jest-app
### Setting up Jest (with SWC)
-Since the release of (Next.js 12)[https://nextjs.org/blog/next-12], Next.js now has built-in configuration for Jest. This includes TypeScript support, auto mocking of stylesheets and images, and more.
+Since the release of (Next.js 12)[https://nextjs.org/blog/next-12], Next.js now has built-in configuration for Jest.
To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`.
@@ -294,7 +294,7 @@ Under the hood, `next/jest` is automatically configuring Jest for you, including
### Setting up Jest (with Babel)
-If you opt out of SWC, in addition to the packages above, you will need to install the `babel-jest` and `identity-obj-proxy` packages, and manually configure Jest.
+If you opt out of SWC, you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
Here are the recommended options to configure Jest for Next.js:
From 6ff455db9f1d9e07d45803f641dff93b11202a6a Mon Sep 17 00:00:00 2001
From: Tim Neutkens
Date: Sun, 21 Nov 2021 12:36:27 +0100
Subject: [PATCH 12/27] 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 a92a8dd920845..1175b44efa248 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -255,7 +255,7 @@ npx create-next-app@latest --example with-jest with-jest-app
### Setting up Jest (with SWC)
-Since the release of (Next.js 12)[https://nextjs.org/blog/next-12], Next.js now has built-in configuration for Jest.
+Since the release of [Next.js 12](https://nextjs.org/blog/next-12), Next.js now has built-in configuration for Jest.
To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`.
From fba9e83e2e6353f684e082915346a29a3bb7bf18 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:38:48 +0000
Subject: [PATCH 13/27] 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 1175b44efa248..67b8892b994c3 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -285,7 +285,7 @@ module.exports = createJestConfig(customJestConfig)
Under the hood, `next/jest` is automatically configuring Jest for you, including:
-- Auto mocking stylesheets (.css, .module.css, and their scss variants) and image imports
+- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants) and image imports
- Setting up `transform` using SWC
- Loading .env (and all variants) into process.env
- Ignoring node_modules from test resolving and transforms
From bb6ee1d7b8dbb9a204e36b8732bd3db225bc9f6d Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:38:54 +0000
Subject: [PATCH 14/27] Update docs/testing.md
Co-authored-by: Lee Robinson
---
docs/testing.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/docs/testing.md b/docs/testing.md
index 67b8892b994c3..595ab24594dd6 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -287,10 +287,10 @@ Under the hood, `next/jest` is automatically configuring Jest for you, including
- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants) and image imports
- Setting up `transform` using SWC
-- Loading .env (and all variants) into process.env
-- Ignoring node_modules from test resolving and transforms
-- Ignoring .next from test resolving
-- Loading next.config.js for flags that enable experimental SWC transforms
+- Loading `.env` (and all variants) into `process.env`
+- Ignoring `node_modules` from test resolving and transforms
+- Ignoring `.next` from test resolving
+- Loading `next.config.js` for flags that enable experimental SWC transforms
### Setting up Jest (with Babel)
From deec8d0b16374bafe8abe0a55af587247b5e68b2 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:39:30 +0000
Subject: [PATCH 15/27] Update docs/testing.md
Co-authored-by: stefanprobst
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 595ab24594dd6..9bd15a08fa69b 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -342,7 +342,7 @@ You can learn more about each configuration option in the [Jest docs](https://je
Styleheets and images aren't used in the tests but importing them may cause errors, so we will need to mock them. Create the mock files we referenced in the configuration above - `fileMock.js` and `styleMock.js` - inside a `__mocks__` directory:
-```json
+```js
// __mocks__/fileMock.js
(module.exports = "test-file-stub")
```
From 5723fe8966e2e87d4ad7b16f5fd6fbbfac1c3d8b Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:39:39 +0000
Subject: [PATCH 16/27] Update docs/testing.md
Co-authored-by: stefanprobst
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 9bd15a08fa69b..164f2284e13fd 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -347,7 +347,7 @@ Styleheets and images aren't used in the tests but importing them may cause erro
(module.exports = "test-file-stub")
```
-```json
+```js
// __mocks__/styleMock.js
module.exports = {};
```
From 2368ef5fcc1a279a0ccc2533c28d587692e463ca Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:39:46 +0000
Subject: [PATCH 17/27] Update docs/testing.md
Co-authored-by: stefanprobst
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 164f2284e13fd..3dc9eea29fecc 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -354,7 +354,7 @@ module.exports = {};
If you're running into the issue `"Failed to parse src "test-file-stub" on 'next/image'"`, add a '/' to your fileMock.
-```json
+```js
// __mocks__/fileMock.js
(module.exports = "/test-file-stub")
```
From 2a21d19f8d9300a8cfd5e410f52a510a69e12171 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:39:58 +0000
Subject: [PATCH 18/27] Update docs/testing.md
Co-authored-by: stefanprobst
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 3dc9eea29fecc..5326338172b7d 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -365,7 +365,7 @@ For more information on handling static assets, please refer to the [Jest Docs](
`@testing-library/jest-dom` includes a set of convenient [custom matchers](https://github.com/testing-library/jest-dom#custom-matchers) such as `.toBeInTheDocument()` making it easier to write tests. You can import the custom matchers for every test by adding the following option to the Jest configuration file:
-```json
+```js
// jest.config.js
setupFilesAfterEnv: ['/jest.setup.js']
```
From 39de36effb2070aef6ea2f32f43f88f7cee18d06 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 13:40:08 +0000
Subject: [PATCH 19/27] Update docs/testing.md
Co-authored-by: Rich Haines
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 5326338172b7d..b6b6c094a867d 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -257,7 +257,7 @@ npx create-next-app@latest --example with-jest with-jest-app
Since the release of [Next.js 12](https://nextjs.org/blog/next-12), Next.js now has built-in configuration for Jest.
-To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`.
+To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`:
```bash
npm install --save-dev jest @testing-library/react @testing-library/jest-dom react-test-renderer
From 9fec0a6a2f189922b2b33a458ff3c918c1e39cbf Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 14:09:38 +0000
Subject: [PATCH 20/27] Change SWC to Rust Compiler and link to docs
---
docs/testing.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/docs/testing.md b/docs/testing.md
index b6b6c094a867d..d9fa40faa27bf 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -253,9 +253,9 @@ You can use `create-next-app` with the [with-jest](https://github.com/vercel/nex
npx create-next-app@latest --example with-jest with-jest-app
```
-### Setting up Jest (with SWC)
+### Setting up Jest (with the Rust Compiler)
-Since the release of [Next.js 12](https://nextjs.org/blog/next-12), Next.js now has built-in configuration for Jest.
+Since the release of [Next.js 12](https://nextjs.org/blog/next-12), Next.js now has built-in configuration for Jest.
To set up Jest, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` and `react-test-renderer`:
@@ -285,8 +285,8 @@ module.exports = createJestConfig(customJestConfig)
Under the hood, `next/jest` is automatically configuring Jest for you, including:
+- Setting up `transform` using [SWC](https://nextjs.org/docs/advanced-features/compiler)
- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants) and image imports
-- Setting up `transform` using SWC
- Loading `.env` (and all variants) into `process.env`
- Ignoring `node_modules` from test resolving and transforms
- Ignoring `.next` from test resolving
@@ -294,7 +294,7 @@ Under the hood, `next/jest` is automatically configuring Jest for you, including
### Setting up Jest (with Babel)
-If you opt out of SWC, you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
+If you opt out of the [Rust Compiler](https://nextjs.org/docs/advanced-features/compiler), you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
Here are the recommended options to configure Jest for Next.js:
@@ -344,19 +344,19 @@ Styleheets and images aren't used in the tests but importing them may cause erro
```js
// __mocks__/fileMock.js
-(module.exports = "test-file-stub")
+module.exports = 'test-file-stub'
```
```js
// __mocks__/styleMock.js
-module.exports = {};
+module.exports = {}
```
If you're running into the issue `"Failed to parse src "test-file-stub" on 'next/image'"`, add a '/' to your fileMock.
```js
// __mocks__/fileMock.js
-(module.exports = "/test-file-stub")
+module.exports = '/test-file-stub'
```
For more information on handling static assets, please refer to the [Jest Docs](https://jestjs.io/docs/webpack#handling-static-assets).
From 782a49d25f3fb3fef165ebb6ed6b6d2c2338c494 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 14:11:14 +0000
Subject: [PATCH 21/27] Update docs/testing.md
Co-authored-by: Rich Haines
---
docs/testing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index d9fa40faa27bf..fbe42dc27ee30 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -340,7 +340,7 @@ You can learn more about each configuration option in the [Jest docs](https://je
**Handling stylesheets and image imports**
-Styleheets and images aren't used in the tests but importing them may cause errors, so we will need to mock them. Create the mock files we referenced in the configuration above - `fileMock.js` and `styleMock.js` - inside a `__mocks__` directory:
+Styleheets and images aren't used in the tests but importing them may cause errors, so they will need to be mocked. Create the mock files referenced in the configuration above - `fileMock.js` and `styleMock.js` - inside a `__mocks__` directory:
```js
// __mocks__/fileMock.js
From 79f33c506cd92dce70b8e0e66b9ac3e07b7b5d0f Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 14:52:55 +0000
Subject: [PATCH 22/27] Add footer to with-jest example
---
examples/with-jest/pages/index.js | 14 ++++++++++++++
examples/with-jest/pages/index.module.css | 5 +++++
examples/with-jest/public/vercel.svg | 4 ++++
examples/with-jest/public/zeit.svg | 11 -----------
4 files changed, 23 insertions(+), 11 deletions(-)
create mode 100644 examples/with-jest/public/vercel.svg
delete mode 100644 examples/with-jest/public/zeit.svg
diff --git a/examples/with-jest/pages/index.js b/examples/with-jest/pages/index.js
index 355ad347b4d54..f1800fc900ac1 100644
--- a/examples/with-jest/pages/index.js
+++ b/examples/with-jest/pages/index.js
@@ -1,4 +1,5 @@
import Head from 'next/head'
+import Image from 'next/image'
import styles from './index.module.css'
const Home = () => (
@@ -42,6 +43,19 @@ const Home = () => (
+
+
)
diff --git a/examples/with-jest/pages/index.module.css b/examples/with-jest/pages/index.module.css
index d6754a34ab1df..2003964508492 100644
--- a/examples/with-jest/pages/index.module.css
+++ b/examples/with-jest/pages/index.module.css
@@ -74,6 +74,11 @@
line-height: 1.5;
}
+.logo {
+ height: 1em;
+ margin-left: 0.5rem;
+}
+
@media (max-width: 600px) {
.grid {
width: 100%;
diff --git a/examples/with-jest/public/vercel.svg b/examples/with-jest/public/vercel.svg
new file mode 100644
index 0000000000000..fbf0e25a651c2
--- /dev/null
+++ b/examples/with-jest/public/vercel.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/examples/with-jest/public/zeit.svg b/examples/with-jest/public/zeit.svg
deleted file mode 100644
index b4a5a94a412c0..0000000000000
--- a/examples/with-jest/public/zeit.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-
From 93bec37018cce291e8e3eb29cab4c06a032d4c60 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 14:53:07 +0000
Subject: [PATCH 23/27] Update snapshot
---
.../__tests__/__snapshots__/snapshot.js.snap | 130 ++++++++++++++++++
1 file changed, 130 insertions(+)
diff --git a/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap b/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap
index 6b1a9c622ce41..0a3b444981007 100644
--- a/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap
+++ b/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap
@@ -72,5 +72,135 @@ exports[`renders homepage unchanged 1`] = `
+
`;
From 5358520341bd8259b14f1572a05deb9b9522523f Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 14:56:39 +0000
Subject: [PATCH 24/27] Add footer to with-jest-babel example
---
examples/with-jest-babel/pages/index.js | 14 ++++++++++++++
examples/with-jest-babel/pages/index.module.css | 5 +++++
examples/with-jest-babel/public/vercel.svg | 4 ++++
examples/with-jest-babel/public/zeit.svg | 11 -----------
4 files changed, 23 insertions(+), 11 deletions(-)
create mode 100644 examples/with-jest-babel/public/vercel.svg
delete mode 100644 examples/with-jest-babel/public/zeit.svg
diff --git a/examples/with-jest-babel/pages/index.js b/examples/with-jest-babel/pages/index.js
index 355ad347b4d54..eb81b36756a83 100644
--- a/examples/with-jest-babel/pages/index.js
+++ b/examples/with-jest-babel/pages/index.js
@@ -1,5 +1,6 @@
import Head from 'next/head'
import styles from './index.module.css'
+import Image from 'next/image'
const Home = () => (
@@ -42,6 +43,19 @@ const Home = () => (
+
+
)
diff --git a/examples/with-jest-babel/pages/index.module.css b/examples/with-jest-babel/pages/index.module.css
index d6754a34ab1df..2003964508492 100644
--- a/examples/with-jest-babel/pages/index.module.css
+++ b/examples/with-jest-babel/pages/index.module.css
@@ -74,6 +74,11 @@
line-height: 1.5;
}
+.logo {
+ height: 1em;
+ margin-left: 0.5rem;
+}
+
@media (max-width: 600px) {
.grid {
width: 100%;
diff --git a/examples/with-jest-babel/public/vercel.svg b/examples/with-jest-babel/public/vercel.svg
new file mode 100644
index 0000000000000..fbf0e25a651c2
--- /dev/null
+++ b/examples/with-jest-babel/public/vercel.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/examples/with-jest-babel/public/zeit.svg b/examples/with-jest-babel/public/zeit.svg
deleted file mode 100644
index b4a5a94a412c0..0000000000000
--- a/examples/with-jest-babel/public/zeit.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-
From cbafca0f99d4fe2f480be15fed962db2b961f229 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 14:57:10 +0000
Subject: [PATCH 25/27] Update snapshot
---
.../__tests__/__snapshots__/snapshot.js.snap | 130 ++++++++++++++++++
1 file changed, 130 insertions(+)
diff --git a/examples/with-jest-babel/__tests__/__snapshots__/snapshot.js.snap b/examples/with-jest-babel/__tests__/__snapshots__/snapshot.js.snap
index 6b1a9c622ce41..0a3b444981007 100644
--- a/examples/with-jest-babel/__tests__/__snapshots__/snapshot.js.snap
+++ b/examples/with-jest-babel/__tests__/__snapshots__/snapshot.js.snap
@@ -72,5 +72,135 @@ exports[`renders homepage unchanged 1`] = `
+
`;
From 3968e9afe0e2a5d3a22d1ad42d013224f12deca6 Mon Sep 17 00:00:00 2001
From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 22 Nov 2021 15:29:23 +0000
Subject: [PATCH 26/27] Add summary at the start of Jest section
---
docs/testing.md | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/docs/testing.md b/docs/testing.md
index 7db526bf1b139..407647b8d2959 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -243,7 +243,13 @@ You can learn more about Playwright and Continuous Integration from these resour
## 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**. There are three ways you can start using Jest within your Next.js application:
+
+1. Using one of our [quickstart examples](https://nextjs.org/docs/testing#quickstart-2)
+2. With the [Next.js Rust Compiler](https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler)
+3. With [Babel](https://nextjs.org/docs/testing#setting-up-jest-with-babel)
+
+The following sections will go through how you can set up Jest with each of these options:
### Quickstart
From e6de54fdd72d486690ebea165f73cc4d01cf5e8a Mon Sep 17 00:00:00 2001
From: Lee Robinson
Date: Sun, 28 Nov 2021 20:21:44 -0500
Subject: [PATCH 27/27] Apply suggestions from code review
---
docs/testing.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/testing.md b/docs/testing.md
index 407647b8d2959..fb001e66ec650 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -296,11 +296,11 @@ Under the hood, `next/jest` is automatically configuring Jest for you, including
- Loading `.env` (and all variants) into `process.env`
- Ignoring `node_modules` from test resolving and transforms
- Ignoring `.next` from test resolving
-- Loading `next.config.js` for flags that enable experimental SWC transforms
+- Loading `next.config.js` for flags that enable SWC transforms
### Setting up Jest (with Babel)
-If you opt out of the [Rust Compiler](https://nextjs.org/docs/advanced-features/compiler), you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
+If you opt-out of the [Rust Compiler](https://nextjs.org/docs/advanced-features/compiler), you will need to manually configure Jest and install `babel-jest` and `identity-obj-proxy` in addition to the packages above.
Here are the recommended options to configure Jest for Next.js: