E2E testing

For E2E testing supastarter integrates Cypress (opens in a new tab).

💡

Why Cypress:
Cypress is a great tool for E2E testing. It's easy to use and has a great developer experience. It's fast, mature and reliable. You can also use it for component (unit) testing.

Running E2E tests

To run the E2E tests in your local environment, run the following command:

pnpm e2e

This will start up the development server of your application and also start the Cypress test runner.

Writing E2E tests

The E2E tests are located in the apps/web/cypress/e2e folder. To create a new test suite, create a new .cy.ts file in this folder:

describe('homepage', () => {
  it('loads the page', () => {
    cy.visit('/');
  });
});

Cypress will then automatically pick up the test suite and run it.

💡

Cypress documentation:
You can find the documentation of Cypress here (opens in a new tab).

Running E2E tests in CI

supastarter also comes with a GitHub action to run the E2E tests in CI. It is enabled by default, but for it work correctly you need to provide the necessary secrects / envs to your Github action workflow.

To do this, open your Github repository and navigate to Settings > Secrets and variables > Actions. There you need to add the following secrets:

DATABASE_URL: The database url of your application. You can create a different database to run test against if you like.

Depending on your applications setup you need to also provide the envs for your mail and payment provider, just like they are defined in your .env.local file.

For example when you are using Stripe, you need to provide the following secrets:

STRIPE_SECRET_KEY: Your secret key for the Stripe api

UI & styling Overview