Test all your wagmi-dependant components without having to modify any existing file

[lefuncq]

Hi there,

It's been a few days since I tried coming up with a solution to mock Wagmi successfully.
I tried to find a working solution because most required setting up a local chain which is not ideal when you want entirely isolated test environments with flexibility, control, and deterministic behaviors.
So here's my workaround. I hope this helps!

I currently use wagmi/core with Next.js, but you can quickly adapt it to fit any framework and/or with the regular wagmi package. It primarily relies on Webpack's aliases.

1. First, you must head to your application's Webpack configuration.
   Since I use Next.js for me it was next.config.js, below is my configuration.

const nextConfig = withBundleAnalyzer({
  reactStrictMode: false,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    if (process.env.NODE_ENV === 'test') {
      config.resolve.alias['@wagmi/core/providers/jsonRpc'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
      config.resolve.alias['@wagmi/core/connectors/ledger'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
      config.resolve.alias['@wagmi/core/connectors/metaMask'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
      config.resolve.alias['@wagmi/core/connectors/coinbaseWallet'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
      config.resolve.alias['@wagmi/core/connectors/walletConnect'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
      config.resolve.alias['@wagmi/core/chains'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
      config.resolve.alias['@wagmi/core'] = path.join(
        __dirname,
        'src/mocks/mockWagmi.js',
      );
    }
    return config;
  },
  images: {
    domains: ['o6ms1bg1o7yv.usemoralis.com'],
  },
  trailingSlash: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/styles')],
  },
});

As you can see if process.env.NODE_ENV equals test (which I set manually within my package.json), then it will resolve all wagmi imports to mockWagmi.js.

2. You must create a file that will mock whatever Wagmi functions, classes and hooks you use. Here's mine as of now.

/* eslint-disable no-param-reassign */
/* eslint-disable max-classes-per-file */

window.wagmiMock = {
  connectedAddress: null,
  connectedChain: null,
  accountCallbacks: [],
  networkCallbacks: [],
};

// Test functions
export const switchAccount = (newAddress) => {
  if (newAddress !== window.wagmiMock.connectedAddress) {
    window.wagmiMock.connectedAddress = newAddress;
    window.wagmiMock.accountCallbacks.forEach((callback) => {
      callback();
    });
  }
};

// Core
export const configureChains = () => ({});
export const createClient = () => {};
export const connect = () => {
  if (window.wagmiMock.connectedAddress && window.wagmiMock.connectedChain) {
    return {
      address: window.wagmiMock.connectedAddress,
      chain: window.wagmiMock.connectedChain,
    };
  }
  return {};
};
export const disconnect = () => {};
export const getAccount = () => ({
  isConnected:
    !!window.wagmiMock.connectedAddress && !!window.wagmiMock.connectedChain,
  address: window.wagmiMock.connectedAddress,
  chain: window.wagmiMock.connectedChain,
});
export const getNetwork = () => ({
  chain: window.wagmiMock.connectedChain,
});
export const switchNetwork = (newChain) => {
  if (newChain !== window.wagmiMock.connectedChain) {
    window.wagmiMock.connectedChain = newChain;
    window.wagmiMock.networkCallbacks.forEach((callback) => {
      callback();
    });
  }
};
export const watchNetwork = (callback) => {
  window.wagmiMock.networkCallbacks.push(callback);
};
export const watchAccount = (callback) => {
  window.wagmiMock.accountCallbacks.push(callback);
};
export const unwatchNetwork = () => {};
export const unwatchAccount = () => {};

// Providers
export const jsonRpcProvider = () => {};

// Chains
export const avalancheFuji = {};
export const bscTestnet = {};
export const goerli = {};
export const polygonMumbai = {};

// Connectors
export class LedgerConnector {}
export class MetaMaskConnector {}
export class WalletConnectConnector {}
export class CoinbaseWalletConnector {}

Here I use windowobject to store callbacks from watch methods and the connection state. This is pretty convenient if you run e2e integrations tests, but if you run unit tests, you can use process.env to store your states. As a matter of fact, any globally accessible variable that will be shared between your test files and your component can do the job.

And you're all set!
Your app will be calling these mock implementations, and you won't depend on any local or remote chains while being able to simulate different scenarios!
Still, my file is short, and yours might become bigger depending on your testing needs and what you use within the wagmi package.