Synpress cannot use cy.acceptMetamaskAccess (is not a function)

Question

I'm trying to use Synpress, but I fail to understand how to solve

TypeError: cy.acceptMetamaskAccess is not a function

Let me share the relevant code* (I mostly followed this tutorial https://medium.com/andamp/how-to-setup-synpress-for-wen3-dapp-frontend-test-automation-with-metamask-73396896684a)

*if something is missing, please let me know

package.json:

{
  "devDependencies": {
    "@testing-library/cypress": "^8.0.2",
    "cypress": "^9.7.0"
  },
  "scripts": {
    "cypress:open": "cypress open",
    "test": "env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='tests/support/index.js'",
    "test:watch": "env-cmd -f .env npx synpress open -cf synpress.json"
  },
  "dependencies": {
    "@synthetixio/synpress": "^1.2.0",
    "env-cmd": "^10.1.0"
  }
}

How I configured my synpress.json

{
    "baseUrl": "https://dappify.com/",
    "userAgent": "synpress",
    "retries": { "runMode": 0, "openMode": 0 },
    "integrationFolder": "tests/integration",
    "screenshotsFolder": "screenshots",
    "videosFolder": "videos",
    "video": true,
    "chromeWebSecurity": true,
    "viewportWidth": 1366,
    "viewportHeight": 850,
    "component": {
      "componentFolder": ".",
      "testFiles": "**/*spec.{js,jsx,ts,tsx}"
    },
    "env": {
      "coverage": false
    },
    "defaultCommandTimeout": 30000,
    "pageLoadTimeout": 30000,
    "requestTimeout": 30000,
    "supportFile": "tests/support/index.js"
  }

Simple test

describe('Test User Login', () => {

    
    it('Connects with Metamask', () => {
        cy.visit('https://dappify.com')
        cy.contains('Sign').click(); 
        cy.contains('Confirm').click();
        cy.contains('Connect Wallet').click();
        cy.contains('Metamask').click();
        cy.switchToMetamaskWindow();
        cy.acceptMetamaskAccess().should("be.true");

    })
  })

I don't understand why cy.acceptMetamaskAccess() is not a function, I can find it here: https://github.com/synthetixio/synpress/blob/master/support/index.d.ts

How can I use the functions listed in this index.d.ts file?

** Solution **

Answer by Fody was helpful! Let me summarise the steps needed:

• inside support folder you need an index.js

inside index.js

import './commands'
import "@synthetixio/synpress/support";

If you want to add custom functions add this file to support too

inside commands.js:

import "@testing-library/cypress/add-commands";

// here go(es) your custom function(s)

Answer 1

It's a bit hard to untangle the Synpress structure. Usually with a plugin library you import a support component and that adds the library's custom commands to your test.

The article says

Run your tests with env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='support/index.js'

which makes me think the last parameter is bringing in the custom commands.

If you already tried that, the following is the command definition, you can try adding it at the top of your spec.

Cypress.Commands.add('acceptMetamaskAccess', allAccounts => {
  return cy.task('acceptMetamaskAccess', allAccounts);
})