Web3-Mock doesn't work with a real application (MetaMask/test-dapp)

[matstyler]

I was able to setup Web3-Mock using Playwright but I cannot use it properly with Cypress. Lets say I have a very simple use case. I mock the metamask wallet and then I want to test that mock using @metamask/test-dapp. Nothing is working as expected and I get provider errors:

The thing is I am able to use window object in the e2e test code but this is not what I need. I want the mock working in e2e manual test - for example by clicking on the "ETH ACCOUNTS" button.

My code for this simple example:

const accounts = ['0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045']

beforeEach(()=>{
  mock({ blockchain: 'ethereum', accounts: { return: accounts }, wallet: 'metamask' })
})

it("should mock account", () => {
cy.visit("http://localhost:9999");

cy.get("#getAccounts").click();
})

[0xNe0x1]

If you call visit after mock the entire javascript state gets flushed. Meaning the entire mock will be deleted.

Try

cy.visit("http://localhost:9999");
mock();
cy.get("#getAccounts").click();

or move the visit into the before. Just make sure you call mock everytime you flush the windows JS state (e.g. when calling visit).