[Testing] Synpress lib for testing the Web3

Introduction

I have worked as a web3 FE developer about four years. Recently, I faced to test the project E2E using testing-library but there was an issue that most of our service work on after connected to web3 wallet.

Generally, type the id & pw, send it to the server, receive the results, and goes on. But in case of testing the dApp, web3 wallet needs the user actions to request data and receive result. Getting wallet info, sendTransactions etc.. Ofcourse we could to assume that we are already connected to the wallet. But, it wasn't the way we want.

Why use the Synpress

The Synpress is the lib for supporting E2E test of dApp by automate interaction between web3 wallet and dApp.

The Synpress wrap-up the Cypress which is the E2E testing-lib and inject the test code to interact with the Web3 Wallet.

I applied it to our dApp and share the issue what I faced.

Setup

Install libs

1. Add the Cypress

run cmd : yarn add -D cypress

After installation of cypress, runs yarn cypress open. Then it will create the dir "cypress" and create the files for the simple tests.

Your_project_dir
└── src (Project Codes)
└── cypress
    └── e2e // Where all of your E2E tests will live.
        └── spec.cy.ts
    └── fixtures
        └── example.json
    └── support
        └── commands.ts
        └── e2e.ts // Where you will import Synpress plugins.

2. Add the Synpress

The Synpress lib work on over the Node 18.x versions.

Run cmd : yarn add -D @synthetixio/synpress

And then, Addimport "@synthetixio/synpress/support/index"; line to the /cypress/support/e2e.ts

3. Create the synpress.config.ts

Create the synpress.config.ts (Not cypress.config.ts) at the root dir (where is the /src dir).

import { defineConfig } from "cypress";
const setupNodeEvents = require("@synthetixio/synpress/plugins/index");
// Set timeout (in milliseconds) for Cypress & Synpress to wait before failing.
// Note: big timeout can slow the tests down. Slow timeouts can cause the test to fail.
// Read more about timeouts: https://docs.cypress.io/guides/references/configuration#Timeouts
const timeout = process.env.SYNDEBUG ? 9999999 : 30000;
export default defineConfig({
  userAgent: "synpress",
  retries: {
    runMode: process.env.CI ? 1 : 0,
    openMode: 0,
  },
  fixturesFolder: "@synthetixio/synpress/fixtures",
  chromeWebSecurity: true,
  viewportWidth: 1920,
  viewportHeight: 1080,
  video: false,
  env: {
    coverage: false,
  },
  defaultCommandTimeout: timeout,
  pageLoadTimeout: timeout,
  requestTimeout: timeout,

  e2e: {
    testIsolation: false,
    // Url for the test dApp
    baseUrl: "http://127.0.0.1:3000/",
    // Where all tests can be found.
    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
    // Path for your support file your setup early
    supportFile: "cypress/support/e2e.ts",
    setupNodeEvents,
  },
});

4. Add .env

.env is for the input custom network data to the MetaMask automatically.

# .env.e2e
# The recovery phrase for the wallet that will be restored while preparing Metamask
# Will be the selected wallet by default when connecting to the dApp
SECRET_WORDS='battle raccoon helmet please deliver keep kiss round orphan frame update message'
# Network info at which the tests will run.
NETWORK_NAME='Mumbai'
CHAIN_ID=80001
RPC_URL='https://matic-mumbai.chainstacklabs.com'
SYMBOL="MATIC"
IS_TESTNET=true

5. Add scripts to the package.json

Add cmd : "synpress:run": "env-cmd -f .env synpress run --configFile synpress.config.ts"

6. Fix the errors

(ISSUE)[https://github.com/cypress-io/cypress/issues/26308]

Cypress 12.x has an error related to bundling source code.

The simple way to fix the issue is to change the "moduleResolution": "bundler" to "moduleResolution": "node" in tsconfig.json;

But, in the case of the users who use nextjs, "moduleResolution": "bundler" options is applied. So, checking the ISSUE Cypress developers refer to add "ts-node" option to the tsconfig.json. And the issue is solved.

This issue is also the same for Synpress using Cypress 12.x versions.