https://github.com/robdel12/percy-cypress-component-testing
https://github.com/robdel12/percy-cypress-component-testing
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/robdel12/percy-cypress-component-testing
- Owner: Robdel12
- Created: 2022-04-18T17:13:03.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-18T17:17:12.000Z (about 4 years ago)
- Last Synced: 2024-10-03T12:25:40.830Z (almost 2 years ago)
- Language: JavaScript
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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`](https://github.com/cypress-io/cypress-component-testing-examples/commit/3bdf444df49183c68e4ad19f8ad5d14b156394fe)
2. Enable Webpack 5
1. Update [next.config.js](next.config.js)
2. Commit [`276c026`](https://github.com/cypress-io/cypress-component-testing-examples/commit/276c02626ff30d08491e5823c0a251c8d2cd66e5)
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](cypress.json)
3. Add [cypress/plugins/index.js](cypress/plugins/index.js)
4. Add [components/paragraph.spec.ct.js](components/paragraph.spec.ct.js), [components/post.spec.ct.js](components/post.spec.ct.js), [pages/index.spec.ct.js](pages/index.spec.ct.js)
5. `npx cypress open-ct`
6. Commit [`2789ebd`](https://github.com/cypress-io/cypress-component-testing-examples/commit/2789ebd1d16ff74e3360fbc54496ee9585b168d3)
_This example was generated by [create-next-app-webpack-5.sh](https://github.com/cypress-io/cypress-component-testing-examples/blob/scripts/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](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/nested-components&project-name=nested-components&repository-name=nested-components)
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
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](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).