From 76682773abe7c8e95fdc7222b1e75cb3e2fd410c Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 14:29:13 +0100 Subject: [PATCH 01/17] [Docs] Add testing page --- docs/manifest.json | 4 + docs/testing.md | 340 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 344 insertions(+) create mode 100644 docs/testing.md diff --git a/docs/manifest.json b/docs/manifest.json index f49ec789bb33..7f0c255b01db 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -117,6 +117,10 @@ "title": "Authentication", "path": "/docs/authentication.md" }, + { + "title": "Testing", + "path": "/docs/testing.md" + }, { "title": "Advanced Features", "routes": [ diff --git a/docs/testing.md b/docs/testing.md new file mode 100644 index 000000000000..6ba1eade8422 --- /dev/null +++ b/docs/testing.md @@ -0,0 +1,340 @@ +# Testing + +
+ Examples + +
+ +This page will go through how to set up Next.js with three commonly used testing tools: [Jest](https://jestjs.io/docs/tutorial-react), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Cypress](https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/). + +## Jest and React Testing Library + +Jest and React Testing Library are used together to test React components. + +### 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: + +```bash +npx create-next-app --example with-jest with-jest-app +``` + +### Manual setup + +To manually set up Jest and React Testing Library, install `jest` , `@testing-library/react`, `@testing-library/jest-dom` as well as some supporting packages: + +```bash +npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom identity-obj-proxy react-test-renderer +``` + +**Configuring Jest** + +Create a `jest.config.js` file in your project's root directory and add the following configuration options: + +```jsx +// jest.config.js + +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', + + // 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 + '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }], + }, + transformIgnorePatterns: [ + '/node_modules/', + '^.+\\.module\\.(css|sass|scss)$', + ], +} +``` + +You can learn more about each option above 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: + +```json +// __mocks__/fileMock.js + +(module.exports = "test-file-stub") +``` + +```json +// __mocks__/styleMock.js + +module.exports = {}; +``` + +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** + +`@testing-library/jest-dom` includes a set of convenient [custom matchers](https://github.com/testing-library/jest-dom#custom-matchers) such as `.toBeInTheDocument()` that make 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'] +``` + +Then, inside a `jest.setup.js` file, 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** + +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. Considering the following paths: + +```json +// tsconfig.json or jsconfig.json +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"] + } + } +} +``` + +Update the Jest configuration file to match: + +```jsx +// jest.config.js +moduleNameMapper: { + // ... + '^@/components/(.*)$': '/components/$1', +} +``` + +**Add a test script to package.json** + +Add the Jest executable in watch mode to the `package.json` scripts: + +```jsx +"scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "test": "jest --watch" +} +``` + +`jest --watch` will rerun tests when a file is changed. For more Jest CLI options, please refer to the [Jest Docs](https://jestjs.io/docs/cli#reference). + +**Create your first tests** + +After all the configuration, your project is now ready to run your tests. Follow Jests convention by adding your tests to the `__tests__` folder in your project's root directory. + +Add a simple test to check if the `` component successfully renders a heading: + +```jsx +// __tests__/testing-library.js +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() + }) +}) +``` + +Add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `` component: + +```jsx +// __tests__/snapshot.js +import React from 'react' +import renderer from 'react-test-renderer' +import Index from '../pages/index' + +it('renders homepage unchanged', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot() +}) +``` + +Test files should not be included inside the pages directory because any files inside the pages directory are considered routes. + +**Running your test suite** + +Run `npm run jest` to run your test suite. After your tests pass or fail you will notice a list of interactive Jest commands that will be helpful as you add more tests. + +For further reading, you may find these resources helpful: + +- [Jest Docs](https://jestjs.io/docs/getting-started) +- [React Testing Library Docs](https://testing-library.com/docs/react-testing-library/intro/) +- [Testing playground](https://testing-playground.com/) - use good testing practices to match elements. + +## Cypress + +Cypress is a test runner used for **End-to-End (E2E)** and **Integration Testing**. + +### Quickstart + +You can use `create-next-app` with the [with-cypress example](https://github.com/vercel/next.js/tree/canary/examples/with-jest) to quickly get started. + +```bash +npx create-next-app --example with-cypress with-cypress-app +``` + +### Manual setup + +To get started with Cypress, install the `cypress` package: + +```bash +npm install --save-dev cypress +``` + +Add Cypress to the `package.json` scripts field: + +```json +"scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "cypress": "cypress open", +} +``` + +Run Cypress for the first time to generate examples that use their recommended folder structure: + +```bash +npm run cypress +``` + +You can look through the generated examples and the [Writing Your First Test](https://docs.cypress.io/guides/getting-started/writing-your-first-test) section of the Cypress Documentation to help you get familiar with Cypress. + +### Creating your first Cypress integration test + +Assuming the following two Next.js pages: + +```jsx +// pages/index.js +import Link from 'next/link' + +export default function Home() { + return ( +
+ + About + +
+ ) +} +``` + +```jsx +// pages/about.js +import Link from 'next/link' + +export default function About() { + return ( +
+

About page

+
+ ) +} +``` + +Add a simple test to check your navigation is working correctly: + +```jsx +// cypress/integration/app.spec.js + +describe('Navigation', () => { + it('should navigate to the about page', () => { + // Start from the index page + cy.visit('http://localhost:3000/') + + // Find a link with an href attribute containing "about" and click it + cy.get('a[href*="about"]').click() + + // The new url should include "/about" + cy.url().should('include', '/about') + + // The new page should contain an h1 with "About page" + cy.get('h1').contains('About page') + }) +}) +``` + +You can use `cy.visit("/")` instead of `cy.visit("http://localhost:3000/")` if you add `"baseUrl": "http://localhost:3000"` to the `cypress.json` configuration file. + +### Running your Cypress tests + +Because Cypress is testing a real Next.js application, it requires the Next.js server to be running prior to starting Cypress. Run `npm run dev` to start the development server then run `npm run cypress` in another terminal window to start Cypress. + +Alternatively, you can install the `start-server-and-test` package and add it to the `package.json` scripts field: `"test": "start-server-and-test dev http://localhost:3000 cypress"` to start the Next.js development server when you run Cypress. + +### Getting ready for Continuous Integration (CI) + +You will have noticed that running Cypress so far has opened an interactive browser which is not ideal for CI environments. You can also run Cypress headlessly using the `cypress run` command: + +```json +// package.json + +"scripts": { + //... + "cypress": "cypress open", + "cypress:headless": "cypress run", + "e2e": "start-server-and-test dev http://localhost:3000 cypress", + "e2e:headless": "start-server-and-test dev http://localhost:3000 cypress:headless" +} +``` + +You can learn more about Cypress and Continuous Integration from these resources: + +- Cypress [Continuous Integration Docs](https://docs.cypress.io/guides/continuous-integration/introduction) +- Official [Cypress Github Action](https://github.com/cypress-io/github-action) + +## Community Packages and Examples + +The Next.js community has created packages and articles you may find helpful: + +- [next-page-tester](https://github.com/toomuchdesign/next-page-tester) for DOM Integration Testing. +- [next-router-mock](https://github.com/scottrippey/next-router-mock) for Storybook. +- [Test Preview Vercel Deploys with Cypress](https://glebbahmutov.com/blog/develop-preview-test/) by Gleb Bahmutov. + +For more information on what to read next, we recommend: + +
+ + Test Environment Variables + Learn more test environments. + +
From 2c127888a2bc4165f22ce19be9e322a7ed96d639 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:21:27 +0100 Subject: [PATCH 02/17] 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 6ba1eade8422..20842f829fe0 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -8,7 +8,7 @@ -This page will go through how to set up Next.js with three commonly used testing tools: [Jest](https://jestjs.io/docs/tutorial-react), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Cypress](https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/). +Learn how to set up Next.js with three commonly used testing tools: [Jest](https://jestjs.io/docs/tutorial-react), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), and [Cypress](https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/). ## Jest and React Testing Library From 2cb4bc92896109cf50283f6b7a2c08b40948d7fa Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:21:43 +0100 Subject: [PATCH 03/17] 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 20842f829fe0..21c25e06ac69 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -90,7 +90,7 @@ For more information on handling static assets please refer to the [Jest Docs](h **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()` that make it easier to write tests. You can import the custom matchers for every test by adding the following option to the Jest configuration file: +`@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 From f905c9316610f0fc3eeedd5fa43e63e01b57f661 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:21:48 +0100 Subject: [PATCH 04/17] 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 21c25e06ac69..9bbf352a8f8f 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -98,7 +98,7 @@ For more information on handling static assets please refer to the [Jest Docs](h setupFilesAfterEnv: ['/jest.setup.js'] ``` -Then, inside a `jest.setup.js` file, add the following import: +Then, inside `jest.setup.js`, add the following import: ```jsx // jest.setup.js From ab38e7f44fa90af91751fb73ee55bbfc9e0f1b16 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:22:13 +0100 Subject: [PATCH 05/17] 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 9bbf352a8f8f..a843d55786dd 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -86,7 +86,7 @@ These files aren't useful in tests but importing them may cause errors, so we wi module.exports = {}; ``` -For more information on handling static assets please refer to the [Jest Docs](https://jestjs.io/docs/webpack#handling-static-assets). +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** From b598f197ae9e26ea5cd5d7192ecd67060c8c58ae Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:22:22 +0100 Subject: [PATCH 06/17] 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 a843d55786dd..4265e0abb493 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -106,7 +106,7 @@ Then, inside `jest.setup.js`, add the following import: 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. +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** From e116ec135bbdb2be8d9670d1d39e998af590d947 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:22:28 +0100 Subject: [PATCH 07/17] Update docs/testing.md Co-authored-by: Lee Robinson --- docs/testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index 4265e0abb493..2e66171b25ab 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -224,10 +224,10 @@ Add Cypress to the `package.json` scripts field: ```json "scripts": { - "dev": "next dev", + "dev": "next dev", "build": "next build", "start": "next start", - "cypress": "cypress open", + "cypress": "cypress open", } ``` From 043fb1841800abcee956b22c9c4b5292502891e3 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:23:16 +0100 Subject: [PATCH 08/17] Update docs/testing.md Co-authored-by: Lee Robinson --- docs/testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index 2e66171b25ab..544521c3ca2c 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -319,8 +319,8 @@ You will have noticed that running Cypress so far has opened an interactive brow You can learn more about Cypress and Continuous Integration from these resources: -- Cypress [Continuous Integration Docs](https://docs.cypress.io/guides/continuous-integration/introduction) -- Official [Cypress Github Action](https://github.com/cypress-io/github-action) +- [Cypress Continuous Integration Docs](https://docs.cypress.io/guides/continuous-integration/introduction) +- [Official Cypress Github Action](https://github.com/cypress-io/github-action) ## Community Packages and Examples From 84bf95b41eb8571f41e2d15b02bf42c5c1ea8c87 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:23:46 +0100 Subject: [PATCH 09/17] Update docs/testing.md Co-authored-by: Lee Robinson --- docs/testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index 544521c3ca2c..2a8e368ec156 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -140,10 +140,10 @@ Add the Jest executable in watch mode to the `package.json` scripts: ```jsx "scripts": { - "dev": "next dev", + "dev": "next dev", "build": "next build", "start": "next start", - "test": "jest --watch" + "test": "jest --watch" } ``` From 9be429fd370e516f94fa18a727062b4adfff483e Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:30:16 +0100 Subject: [PATCH 10/17] 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 2a8e368ec156..3ba4cb63d683 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -174,7 +174,7 @@ describe('App', () => { }) ``` -Add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `` component: +Optionally, add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes to your `` component: ```jsx // __tests__/snapshot.js From d9721429856048c32e77e411d0b008ad7d877fb6 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:31:51 +0100 Subject: [PATCH 11/17] 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 3ba4cb63d683..0f17059b3824 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -147,7 +147,7 @@ Add the Jest executable in watch mode to the `package.json` scripts: } ``` -`jest --watch` will rerun tests when a file is changed. For more Jest CLI options, please refer to the [Jest Docs](https://jestjs.io/docs/cli#reference). +`jest --watch` will re-run tests when a file is changed. For more Jest CLI options, please refer to the [Jest Docs](https://jestjs.io/docs/cli#reference). **Create your first tests** From c500281611a511b0ddf8e23614cfa01b6484693a Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 16:12:12 +0100 Subject: [PATCH 12/17] 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 0f17059b3824..5b6ae774437a 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -153,7 +153,7 @@ Add the Jest executable in watch mode to the `package.json` scripts: After all the configuration, your project is now ready to run your tests. Follow Jests convention by adding your tests to the `__tests__` folder in your project's root directory. -Add a simple test to check if the `` component successfully renders a heading: +For example, we can add a test to check if the `` component successfully renders a heading: ```jsx // __tests__/testing-library.js From eb50af53819ae3fc0a9519cf7cefbf07f085a86e Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 16:12:44 +0100 Subject: [PATCH 13/17] 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 5b6ae774437a..32a9ccb3d353 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -151,7 +151,7 @@ Add the Jest executable in watch mode to the `package.json` scripts: **Create your first tests** -After all the configuration, your project is now ready to run your tests. Follow Jests convention by adding your tests to the `__tests__` folder in your project's root directory. +Your project is now ready to run tests. Follow Jests convention by adding tests to the `__tests__` folder in your project's root directory. For example, we can add a test to check if the `` component successfully renders a heading: From 7d52e5fcad761ea7acc7bfc7c8fc7ee2c08cde75 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 16:16:55 +0100 Subject: [PATCH 14/17] 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 32a9ccb3d353..3cb3ce551f3e 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -192,7 +192,7 @@ Test files should not be included inside the pages directory because any files i **Running your test suite** -Run `npm run jest` to run your test suite. After your tests pass or fail you will notice a list of interactive Jest commands that will be helpful as you add more tests. +Run `npm run jest` to run your test suite. After your tests pass or fail, you will notice a list of interactive Jest commands that will be helpful as you add more tests. For further reading, you may find these resources helpful: From b2bf18709cc685b463146f7f101004edcb303d55 Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 17:20:11 +0100 Subject: [PATCH 15/17] Fix linting issue --- docs/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/testing.md b/docs/testing.md index 3cb3ce551f3e..2dd74773a8e6 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -271,7 +271,7 @@ export default function About() { } ``` -Add a simple test to check your navigation is working correctly: +Add a test to check your navigation is working correctly: ```jsx // cypress/integration/app.spec.js From bf51e3f7200a2a68a6bf3e27275977f2dd529643 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 18:21:05 +0100 Subject: [PATCH 16/17] 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 2dd74773a8e6..cc93fa56a2b1 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -198,7 +198,7 @@ For further reading, you may find these resources helpful: - [Jest Docs](https://jestjs.io/docs/getting-started) - [React Testing Library Docs](https://testing-library.com/docs/react-testing-library/intro/) -- [Testing playground](https://testing-playground.com/) - use good testing practices to match elements. +- [Testing Playground](https://testing-playground.com/) - use good testing practices to match elements. ## Cypress From dae19afd5dbb7e28a15f9845297c81ecd0760142 Mon Sep 17 00:00:00 2001 From: delbaoliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 11 Aug 2021 19:49:56 +0100 Subject: [PATCH 17/17] Add suggested edits --- docs/testing.md | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/docs/testing.md b/docs/testing.md index cc93fa56a2b1..f2804e28cf37 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -12,7 +12,7 @@ Learn how to set up Next.js with three commonly used testing tools: [Jest](https ## Jest and React Testing Library -Jest and React Testing Library are used together to test React components. +Jest and React Testing Library are frequently used together for Unit Testing. ### Quickstart @@ -110,7 +110,7 @@ If you need to add more setup options before each test, it's common to add them **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. Considering the following paths: +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: ```json // tsconfig.json or jsconfig.json @@ -124,12 +124,9 @@ If your project is using [Module Path Aliases](https://nextjs.org/docs/advanced- } ``` -Update the Jest configuration file to match: - ```jsx // jest.config.js moduleNameMapper: { - // ... '^@/components/(.*)$': '/components/$1', } ``` @@ -249,23 +246,21 @@ import Link from 'next/link' export default function Home() { return ( -
+
+ ) } ``` ```jsx // pages/about.js -import Link from 'next/link' - export default function About() { return (
-

About page

+

About Page

) } @@ -288,7 +283,7 @@ describe('Navigation', () => { cy.url().should('include', '/about') // The new page should contain an h1 with "About page" - cy.get('h1').contains('About page') + cy.get('h1').contains('About Page') }) }) ```