I want to add custom functions to a synpress project. (Synpress is a wrapper around Cypress which allows interaction with Metamask). Note there is a question: Cypress custom command is not recognized when invoked but even though I read through this QA, my custom functions are not recognized.
This is my project setup.
synpress_project/ ├─ cypress/ │ ├─ e2e/ │ ├─ support/ ├─ package-lock.json ├─ package.json
From the answer mentioned before
All the code and referenced modules in index.js are loaded before your test file. So you need to refer(require) commands.js in your index.js file
I obeyed to that, inside cypress/support
:
commands.js
import "@testing-library/cypress/add-commands"; // add it here, because custom functions need synpress commands as well import "@synthetixio/synpress/support"; // add custom functions Cypress.Commands.add("disconnectFromDappify", () => { cy.disconnectMetamaskWalletFromDapp().should("be.true"); });
index.js
import './commands'
I know that the files are being read, since removing the line import "@synthetixio/synpress/support";
breaks the tests (metamask interaction does not work anymore). However, my function is not available
TypeError: cy.disconnectFromDappify is not a function
package.json
{ "devDependencies": { "cypress": "^10.0.1" }, "scripts": { "test": "env-cmd -f .env npx synpress run -cf synpress.json" }, "dependencies": { "@synthetixio/synpress": "^1.2.0", "env-cmd": "^10.1.0" } }
synpress.json
{ "baseUrl": "http://localhost:3000", "userAgent": "synpress", "retries": { "runMode": 0, "openMode": 0 }, "integrationFolder": "cypress/e2e/specs", "screenshotsFolder": "screenshots", "videosFolder": "videos", "video": false, "chromeWebSecurity": true, "viewportWidth": 1366, "viewportHeight": 850, "component": { "componentFolder": ".", "testFiles": "**/*spec.{js,jsx,ts,tsx}" }, "env": { "coverage": false }, "defaultCommandTimeout": 30000, "pageLoadTimeout": 30000, "requestTimeout": 30000, "supportFile": "cypress/support/index.js" }
Advertisement
Answer
With help of a colleague, I was able to solve it.
Although, I specified "supportFile": "cypress/support/index.js"
inside the synpress.json
. It could not find the custom functions.
But if I changed the way the supportFile is called, explicit instead of implicit, it works.
Add --supportFile='cypress/support/index.js'
to the end of the command.
"scripts": { "test": "env-cmd -f .env npx synpress run -cf synpress.json --supportFile='cypress/support/index.js'" },
Additionally, remove import "@testing-library/cypress/add-commands";
from the commands.js
file. (don’t know why this is needed, but code breaks, if used, any hints are welcome!)