Component Testing Example: Create Next App + Webpack 5

This is an example Create Next App + Webpack 5 project with Cypress component testing.

• yarn to install the dependencies
• npx cypress open-ct to run interactively
• npx cypress run-ct to run all tests headlessly

The following was done to create this example:

1. Initialize a baseline "nested-components" project in the create-next-app-webpack-5 subdirectory
   1. npx create-next-app --example nested-components create-next-app-webpack-5
   2. cd create-next-app-webpack-5
   3. Commit 3bdf444
2. Enable Webpack 5
   1. Update next.config.js
   2. Commit 276c026
3. Add Cypress component testing support with sample tests
   1. yarn add -D cypress @cypress/react @cypress/webpack-dev-server webpack-dev-server@3 html-webpack-plugin@5
   2. Add cypress.json
   3. Add cypress/plugins/index.js
   4. Add components/paragraph.spec.ct.js, components/post.spec.ct.js, pages/index.spec.ct.js
   5. npx cypress open-ct
   6. Commit 2789ebd

This example was generated by create-next-app-webpack-5.sh on 2021-05-26. The original README follows.

---

Example app using nested components

Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under pages/index.js that uses components/paragraph.js and components/post.js that can be styled and managed separately.

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example nested-components nested-components-app
# or
yarn create next-app --example nested-components nested-components-app

Deploy it to the cloud with Vercel (Documentation).