[BUG] Running Cypress tests on examples fails

[vanam]

Describe the bug

Running Cypress tests on examples fails because of misconfiguration.

> auth-antd@1.0.0 cypress:run
> cypress run -C ./cypress.config.ts


DevTools listening on ws://127.0.0.1:46147/devtools/browser/560c86b5-1183-43ea-90b1-674e0196e977
(node:31044) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("file%3A///home/martin/.cache/Cypress/13.13.0/Cypress/resources/app/node_modules/ts-node/esm/transpile-only.mjs", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
Your supportFile is missing or invalid: ../../cypress/support/e2e.ts

The supportFile must be a .js, .ts, .coffee file or be supported by your preprocessor plugin (if configured).

Fix your support file, or set supportFile to false if a support file is not necessary for your project.

If you have just renamed the extension of your supportFile, restart Cypress.

https://on.cypress.io/support-file-missing-or-invalid

I was able to fix it for my example by:

1. altering cypress.config.ts

  e2e: {
-    fixturesFolder: "../../cypress/fixtures",
-    supportFile: "../../cypress/support/e2e.ts",
+    fixturesFolder: "./cypress/fixtures",
+    supportFile: "./cypress/support/e2e.ts",
  },

2. adding fixture cypress/fixtures/demo-auth-credentials.json
3. adding cypress/support/e2e.ts (with hacked content from this repo):

/// <reference types="cypress" />
/// <reference types="./index.d.ts" />

const getAntdNotification = () => {
    return cy.get(".ant-notification-notice");
};

const getAntdFormItemError = ({ id }: IGetAntdFormItemErrorParams) => {
    return cy.get(`#${id}_help > .ant-form-item-explain-error`);
};

Cypress.Keyboard.defaults({
    keystrokeDelay: 0,
});

Cypress.config("defaultCommandTimeout", 20000);
Cypress.config("requestTimeout", 20000);

Cypress.Commands.add("getAntdNotification", getAntdNotification);
Cypress.Commands.add("getAntdFormItemError", getAntdFormItemError);

/**
 * Disable telemetry calls
 */
beforeEach(() => {
    cy.intercept("https://telemetry.refine.dev/**", {
        body: "Disabled telemetry to avoid unwanted entries in the database",
        statusCode: 200,
    }).as("telemetry");
});

Steps To Reproduce

1. Install an example eg. npm create refine-app@latest -- --example auth-antd.
2. Start app using npm run dev
3. Run npm run cypress:run

Expected behavior

It is expected to run successfully Cypress tests against an example app.

Packages

{
  "dependencies": {
    "@cerbos/http": "^0.6.0",
    "@refinedev/antd": "^5.42.0",
    "@refinedev/cli": "^2.16.36",
    "@refinedev/core": "^4.53.0",
    "@refinedev/react-router-v6": "^4.5.11",
    "@refinedev/simple-rest": "^5.0.8",
    "@uiw/react-md-editor": "^3.19.5",
    "antd": "^5.17.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.8.1"
  },
  "devDependencies": {
    "@types/node": "^18.16.2",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.4.2",
    "vite": "^5.1.6"
  }

Additional Context

No response

[aliemir]

Hey @vanam thank you for reporting this. 🙏 We're using these e2e tests in our deployment CI/CD process. When used as a template, they are no longer needed since they are designed for internal use and won't work well with customized projects.

We had a long running discussion about what to do with them when used as a template in create-refine-app. Final decision was to move them out of the examples to a separate directory and run there. I've assigned @BatuhanW to the issue and he'll do the necessary changes.

We'll update here when we have the PR ready 🚀