https://github.com/dually8/cypress-template

This project is more or less a template for setting up cypress in any given JS/TS app.
https://github.com/dually8/cypress-template

cypress template testing

Last synced: about 1 month ago
JSON representation

This project is more or less a template for setting up cypress in any given JS/TS app.

• Host: GitHub
• URL: https://github.com/dually8/cypress-template
• Owner: dually8
• License: mit
• Created: 2022-09-10T04:01:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-21T15:24:31.000Z (5 months ago)
• Last Synced: 2024-07-21T17:02:27.876Z (5 months ago)
• Topics: cypress, template, testing
• Language: TypeScript
• Homepage:
• Size: 405 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Cypress Template

This is a template project that shows how to setup Cypress with a React project.

## Getting Started

1. Install [NodeJS 16.x](https://nodejs.org/en/download/)

2. Run `npm install`

3. Run `npm run e2e`

## Adding Cypress To A New Project

1. Run `npm i --save-dev cypress`

2. Run `npx cypress open` to open cypress for the first time

3. Go through the setup, select E2E testing and have cypress auto generate the given files.

4. Create a new `tsconfig.json` in the `cypress/` directory. Feel free to use this project's `cypress/tsconfig.json` as a template.

If you're looking to add custom commands, you'll need to do the following:

1. Create a file `cypress/global.d.ts` to hold your typings.

2. In your `cypress/support/commands.ts` file, add your custom command. Your typings for that will go in the `global.d.ts` you created earlier.

I also like to setup interceptors as a function, as seen in [`utils.ts`](cypress/support/utils.ts). This lets me import it and use it in a `beforeEach` block in my tests.

For scripting, I like to add [concurrently](https://www.npmjs.com/package/concurrently) and sometimes [cross-env](https://www.npmjs.com/package/cross-env), depending on the situation.

This allows me to add scripts like `e2e` and `e2e:watch` as seen in this project's [`package.json`](package.json).

## Further Reading

- [Create React App](https://create-react-app.dev/docs/getting-started/)

- [Cypress](https://docs.cypress.io/guides/overview/why-cypress)

- [Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)