Connect Metamask mock

[1ucas-eng]

Hi team,

How can we mock connect Metamask wallet with using this library? I am now using Jest, Playwright, Wagmi

So, what I need to do is

1. visit page
2. find connect wallet button
3. click it
4. click confirm on metamask
5. check wallet connection status

Thanks in advance

[10xSebastian]

Hi @1ucas-eng

As we don't use Playwright nor Wagmi, we can't give you any detailed support for those.

Here is an example of how we mock this flow in Cypress: https://github.com/DePayFi/widgets/blob/main/cypress/e2e/Connect/main.js

mock({ blockchain, accounts: { return: accounts }, wallet: 'metamask' })

This should mock metamask sufficiently and will confirm immediately. This library will not: "click confirm on metamask" it mocks this step.

If you need to test that your interface displays the correct state while waiting for the user to "click confirm on metamask" you can delay the mocked confirmation with delay:

mock({
  blockchain,
  wallet: 'metamask',
  accounts: {
    delay: 10000, // ms
    return: ['0xd8da6bf26964af9d7eed9e03e53415d37aa96045']
  }
})

What exactly do you mean with: "check wallet connection status"?

[1ucas-eng]

Thanks for your reply. "check wallet connection status" - I just meant when the wallet is connected, usually we can see "Disconnect" button or connected wallet address on the button.

[1ucas-eng]

Thanks for your reply. "check wallet connection status" - I just meant when the wallet is connected, usually we can see "Disconnect" button or connected wallet address on the button.

Can you please check my code? Metamask is not appearing in wallet options and also window.ethereum is logging as "undefined"

/* eslint-disable @typescript-eslint/ban-types */
import { test } from '@playwright/test';
import { mock } from '@depay/web3-mock';

test.beforeEach(async ({ page }) => {
  mock({
    blockchain: 'ethereum',
    accounts: {
      return: ['0xd73b04b0e696b0945283defa3eee453814758f1a'],
    },
    wallet: 'metamask',
  });
});

test('Mock Metamask Wallet', async ({ page }) => {
  await page.goto('http://localhost:5173/dashboard');
  await page.waitForTimeout(2000);
  await page.locator('[data-test="connect-wallet"]').click();
  await page.waitForTimeout(10000);
});

[10xSebastian]

Can you try to call the mock after:

await page.goto('http://localhost:5173/dashboard');

as window.ethereum is typically reset after navigating new pages, and all the mocks are reset, too.

either in the beforeEach, or in the test case?