problems with watch mode

MahdiMhqq commented 2 years ago

hi guys. thanks for such a great job! I'm working on an NFT marketplace project and I need to write some E2E tests for different parts of the application. So, after searching I ran into your wrapper and started to use it.

Now I have problems running the wrapper within watch mode. Yes I know The docs say (maybe bugged in some cases because it doesn't clear metamask state before each e2e test, please use synpress run) but this isn't run AT ALL! not with some bugs! also, running each test completely with npm run test is really time-consuming process.

PROBLEM DESCRIPTION: When I run npm run test (PLEASE CHECK THE PACKAGE.JSON FILE BELOW) everything works as expected. But when I want to run a particular test (let's say test.spec.js file) in cypress windows, chrome test window freezes with the following error:

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > cy.task()

The cy command you invoked inside the promise was:

  > cy.MintSetup()

Because Cypress commands are already promise-like, you don't need to wrap them or return your own promise.

Cypress will resolve your command with whatever the final Cypress command yields.

The reason this is an error instead of a warning is because Cypress internally queues commands serially whereas Promises execute as soon as they are invoked. Attempting to reconcile this would prevent Cypress from ever resolving.

Because this error occurred during a before all hook we are skipping the remaining tests in the current suite:

   'setupMetamask',
  158 |   (secretWordsOrPrivateKey, network, password = 'Tester@1234') => {
> 159 |     return cy.task('setupMetamask', {
      | ^
  160 |       secretWordsOrPrivateKey,
  161 |       network,
  162 |       password,

Can you please help me to speed up my development speed by running watch mode?

here is a complete description of The problem:

Folder structure of the project:

NFT app
├── app folders
├──cypress <= HERE IS THE MAIN TEST FOLDER
│             ├── plugins <= EMPTY
│             ├── integration <= EMPTY
│             ├── e2e
│             │        └── test.spec.js
│             ├── support
│             │        ├── index.js
│             │        └── commands.js
│             ├── tsconfig.json
│             └── .eslintrc.js
│ 
├── synpress.json
└──  package.json

config files: synpress.json

"baseUrl": "http://localhost:3001",
"userAgent": "synpress",
"retries": { "runMode": 0, "openMode": 0 },
"integrationFolder": "cypress/integration",
"screenshotsFolder": "cypress/screenshots",
"videosFolder": "cypress/videos",
"fixturesFolder" : "cypress/fixtures",
"video": false,
"chromeWebSecurity": false,
"viewportWidth": 1366,
"viewportHeight": 850,
"component": {
"componentFolder": ".",
"testFiles": "**/*spec.{js,jsx,ts,tsx}"
},
"defaultCommandTimeout": 30000,
"pageLoadTimeout": 30000,
"requestTimeout": 30000,
"supportFile": "cypress/support/index.js"
}

packages.json

"name": "nftation-front",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"dev-run": "yarn install && next dev -p 3001",
"start": "next start -p 3001",
"prod": "yarn install && next build && next start -p 3001",
"lint": "next lint",
"test": "env-cmd -f .env npx synpress run -cf synpress.json --config supportFile=cypress/support/index.js",
"test:watch": "env-cmd -f .env npx synpress open -cf synpress.json"
},
"dependencies": {
  PACKAGES
},
"devDependencies": {
"@synthetixio/synpress": "^1.1.1",
"@testing-library/cypress": "^8.0.2",
"autoprefixer": "^10.4.4",
"cypress": "^9.5.1",
"cypress-file-upload": "^5.0.8",
"cypress-localstorage-commands": "^1.7.0",
"dotenv": "^16.0.0",
"env-cmd": "^10.1.0",
"eslint": "8.11.0",
"eslint-config-next": "12.1.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-testing-library": "^5.0.6",
"typescript": "^4.6.4"
},
"resolutions": {
"eslint-plugin-react": "7.28.0"
}
}

.eslintrc.js in the cypress folder


const synpressPath = path.join(
process.cwd(),
"/node_modules/@synthetixio/synpress"
);

module.exports = { extends: ${synpressPath}/.eslintrc.js, };

tsconfig.json in the cypress folder
```{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": [
      "cypress",
      "@types/puppeteer-core",
      "@synthetixio/synpress/support",
      "cypress-wait-until",
      "@testing-library/cypress"
    ],
    "outDir": "./output"
  },
  "include": ["**/*.*"]
}

support folder index.js file

import "dotenv/config";
import "cypress-localstorage-commands";
import "cypress-file-upload";
import "@synthetixio/synpress/support";
import "./commands";

YakovL commented 1 year ago

I'd like to bump this as a major problem, with some details explained here

YakovL commented 1 year ago

Hi, check #927, there's a fix for this particular issue (also, use the fix from #837).

However, watch mode still fails for me most of the times. I'll try to create a reproducible issue.

Synthetixio / synpress

problems with watch mode #417