javascript - Synpress 无法使用 cy.acceptMetamaskAccess (不是函数)

Question

我正在尝试使用 Synpress，但我不明白如何解决

TypeError: cy.acceptMetamaskAccess is not a function

让我分享相关代码*(我主要遵循本教程 https://medium.com/andamp/how-to-setup-synpress-for-wen3-dapp-frontend-test-automation-with-metamask-73396896684a )

*如果有什么遗漏，请告诉我

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

我如何配置我的 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"
  }

简单测试

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");

    })
  })

我不明白为什么cy.acceptMetamaskAccess()不是一个函数，我可以在这里找到它:https://github.com/synthetixio/synpress/blob/master/support/index.d.ts

如何使用此 index.d.ts 文件中列出的函数？

** 解决方案 **

Fody 的回答很有帮助!让我总结一下所需的步骤:

• 在 support 文件夹中，您需要一个 index.js

在index.js内

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

如果您想添加自定义功能，也请将此文件添加到support

里面commands.js:

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

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

Answer 1

理清 Synpress 结构有点困难。通常，使用插件库，您可以导入支持组件，并将该库的自定义命令添加到您的测试中。

文章说

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

这让我认为最后一个参数正在引入自定义命令。

如果您已经尝试过，以下是命令定义，您可以尝试将其添加到规范的顶部。

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