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"
}