How to mock an ethers provider for test Jest

Question

My function that I want to test in the following:

getData: async function(){
  if(typeof window.ethereum !== 'undefined') {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const contract = new ethers.Contract(this.contractAddress, NftContract.abi, provider); //new instance of the contract to interact with the function of the contract
    try {
      const cost = await contract.cost();
      const totalSupply = await contract.totalSupply();
      this.data.cost = String(cost);
      this.data.totalSupply = String(totalSupply);
    }
    catch(err) {
      this.setError('An error occured to get the data');
    }
  }
}

My test is the following:

it('getData function should affect the cost and totalSupply to the data', async () => {
    const wrapper = shallowMount(NFTMintComponent);
    await wrapper.setData({
      contractAddress: '0x10Bc587867D87d1Ea1Cd62eac01b6DD027c182E9',
      ownerAddress: '0xe14d2f7105f759a100eab6559282083e0d5760ff',
      userAddress: '',
      data: {
        cost: '',
        totalSupply: ''
      },
      error: '',
      success: ''
    });

window.ethereum = jest.fn();//= [];
const window_ethereum = 'window_ethereum';
window.ethereum.mockResolvedValue(window_ethereum);
const ethers = {
    providers: {
        Web3Provider: jest.fn()
    },
    Contract: jest.fn()
}

const provider = 'provider';
ethers.providers.Web3Provider.mockResolvedValue(provider);

const contractMocked = 'contract';
ethers.Contract.mockResolvedValue(contractMocked);

const contract = {
    cost: jest.fn(),
    totalSupply: jest.fn()
};

const costMocked = 5;
const totalSupplyMocked = 50;
contract.cost.mockResolvedValue(costMocked);
contract.totalSupply.mockResolvedValue(totalSupplyMocked);

await wrapper.vm.getData();

  });

I expect that result:

expect(wrapper.vm.data.cost).toBe('5');

expect(wrapper.vm.data.totalSupply).toBe('50');

The test returns me '' instead of the values I mocked. Why do wrapper.vm.data.cost is '' instead of '5' ? same with wrapper.vm.data.totalSupply ?

UPDATE My test:

  let wrapper;

  beforeEach(() => {
    // use this to check the state of anything in the view
    wrapper = shallowMount(NFTMintComponent);
  });
it('getData function should affect the cost and totalSupply to the data', async () => {

    //window.ethereum = jest.fn();
    //const window_ethereum = 'window_ethereum_test';
    //window.ethereum.mockResolvedValue(window_ethereum);
    window.ethereum = [];
    window.ethereum.request = jest.fn();
    const accounts = ['0xe14d2f7105f759a100eab6559282083e0d5760ff'];
    window.ethereum.request.mockResolvedValue(accounts);

    let ethers = {
        providers: {
            Web3Provider: jest.fn()
        },
        Contract: jest.fn()
    }

    const provider = 'ropsten';
    ethers.providers.Web3Provider.mockResolvedValue(provider);

    const contractMocked = 'contract';
    ethers.Contract.mockResolvedValue(contractMocked);

    let contract = {
        cost: jest.fn(),
        totalSupply: jest.fn()
    };

    const costMocked = 5;
    const totalSupplyMocked = 50;
    contract.cost.mockResolvedValue(costMocked);
    contract.totalSupply.mockResolvedValue(totalSupplyMocked);

    await wrapper.vm.getData();
    //console.log(wrapper.vm.data);

    expect(wrapper.vm.data.cost).toBe('5');
    expect(wrapper.vm.data.totalSupply).toBe('50');
  });

My test enter into the 'try' but stops at const cost = await contract.cost(); with the following error: Could not detect network ... event: 'invalidNetwork' reason 'invalid BigNumber value'

I think I don't mocked well my ethers.providers.Web3Provider or my ethers.Contract.

How to mock the provider and the contract ?

Answer 1

I found a solution: I'm using eth-testing package to mock the provider and contract interaction:

  it('getData function should affect the cost and totalSupply to the data', async () => {

    // Start with not connected wallet
    testingUtils.mockNotConnectedWallet();
    // Mock the connection request of MetaMask
    testingUtils.mockRequestAccounts(["0xe14d2f7105f759a100eab6559282083e0d5760ff"]);
    //allows to mock the chain ID / network to which the provider is connected --> 0x3 Ropsten network
    testingUtils.mockChainId("0x3");

    const abi = NftContract.abi;
    // An address may be optionally given as second argument, advised in case of multiple similar contracts
    const contractTestingUtils = testingUtils.generateContractUtils(abi);

    await contractTestingUtils.mockCall("cost", [5]);
    await contractTestingUtils.mockCall("totalSupply", [50]);

    await wrapper.vm.getData();

    expect(wrapper.vm.data.cost).toBe('5');
    expect(wrapper.vm.data.totalSupply).toBe('50');
  });

If someone has another solution, please let us know