Try our new Snaps end-to-end testing environment for Jest!

[Mrtenz]

We recently released a new tool for end-to-end testing snaps with Jest, called @metamask/snaps-jest. It consists of a Jest environment and Jest matchers, which make it easier to run snaps in a MetaMask-like environment, without any of the hassle of setting up end-to-end tests yourself.

We'd love feedback on the API design, any features you'd like to see, or anything else regarding @metamask/snaps-jest!

Getting started

To get started, all you need to do is:

• Install the package using yarn add -D @metamask/snaps-jest@^0.35.2-flask.1.

  • Note that there is no stable version yet, but you can use the -flask.1 release to test your snap.

• Add a preset to your Jest config:

  // jest.config.js
  module.exports = {
    preset: '@metamask/snaps-jest',
  };

Then you can use the installSnap function to install a snap, and send requests to it:

import { installSnap } from '@metamask/snaps-jest';

describe('MySnap', () => {
  it('should do something', async () => {
    const { request } = await installSnap();
    const response = await request({
      method: 'ping',
    });

    expect(response).toRespondWith('pong');
  });
});

For full details on the API, Jest matchers, options, etc., you can refer to the documentation.

More examples

All of our example snaps have end-to-end tests written using this tool. Take a look at the examples folder for an overview.

[mindofmar]

Hey @Mrtenz this looks amazing I'm excited to try it out.

Not sure if you've seen this error yet if you might be able to give some guidance?

Cannot find module '@metamask/snaps-jest' or its corresponding type declarations.

I installed using the same process as mentioned. I can see the package installed within my node_modules, but importing it seems to be the issue. I also tried removing yarn.lock and node_modules then re-installing but no luck.

To make sure it wasn't an issue with my setup, I cloned down the snaps repo to try running the transaction-insights project tests locally but ran into a similar error. Any advice would be appreciated.

[Mrtenz]

HI @mindofmar, thanks for trying it out!

I just noticed there was an issue with how it's tagged on NPM. 0.35.1-flask.1 is tagged as latest (because it's the initial release), but there were some issues with that version which we resolved in 0.35.2-flask.1. That version is tagged as flask, however.

Can you try installing it like this, and let me know if that resolves your issue?

yarn add -D @metamask/snaps-jest@^0.35.2-flask.1

[mindofmar]

That fixed the issue, thanks @Mrtenz !

[mindofmar]

@Mrtenz one more question for ya. your docs suggest that the jest command should work automatically after installing the package.

I'm getting an error zsh: command not found: jest

[Mrtenz]

@mindofmar Good point. I assumed in the docs that you already have Jest working, or know how to set it up, but I will add some instructions in case you don't.

You can also use the template-snap-monorepo as example.

Thanks for the feedback!

[mindofmar]

Hey @Mrtenz I'm back :)

I think there's a bug with the network mocking. Mocking 4XX status codes is causing the fetch API to throw unexpected errors.

Example:

index.ts - Psuedocode

try {
   const response = await fetch(my-api-url)

   if (response.status === 403) {
      return {
         content: text('403 returned'),
      }
   }
} catch (e) {
   return {
      content: text('unknown error returned'),
   }
}

index.test.ts - My code

  it('should handle 403 unauthorized from API', async () => {
    const snap = await installSnap();

    const { unmock } = await snap.mock({
      url: 'my-api-url',
      response: {
        status: 403,
      },
    });

    const response = await snap.sendTransaction({
      chainId: ChainId.EthereumMainnet,
    });

   expect(response).toRender(text('403 returned'));

Test failed
Expected: text('403 returned')
Received: text('unknown error returned')

Running the Snap in Flask produces the correct result of showing the text('403 returned') component. This lead me to the conclusion that it seems like there is some sort of inconsistency in the way 4XX+ status codes get handled when mocked.

[Mrtenz]

Thanks for the report @mindofmar! Looking into this.

[Mrtenz]

There seems to be an issue when the response body is empty (which is the default). This will be fixed in the next release of snaps-jest, but for now, you can work around it by specifying a body:

const { unmock } = await snap.mock({
  url: 'my-api-url',
  response: {
    status: 403,
    body: 'Forbidden',
  },
});

[mindofmar]

Thanks for the update!! Unfortunately it doesn't seem like that fix worked for me either

[Mrtenz]

Interesting. Could you create a reproduction repository so I can investigate further?

[l-monninger]

Getting type issues if I reinstall anytime after yarn create @metamask/snap.

src/index.test.ts:30:30 - error TS2339: Property 'toRespondWith' does not exist on type 'Matchers<void, { response: { result: Json; } | { error: Json; }; id: string; notifications: { message: string; type: "native" | "inApp"; id: string; }[]; content?: Panel | { value: string; type: NodeType.Copyable; } | ... 4 more ... | undefined; }> & SnapshotMatchers<...> & Inverse<...> & PromiseMatchers<...>'.

    30       expect(await response).toRespondWith(true);

[l-monninger]

Okay, so here's how I've been able to reproduce twice in about the last 15 minutes.

1. yarn create @metamask/snap test && cd test
2. yarn workspace snap test should work.
3. yarn install
4. yarn workspace snap test should still work.
5. Update the dependencies in the snap package.json as follows.

"@metamask/keyring-api": "^0.1.3",
"@metamask/snaps-types": "^0.35.2-flask.1",
"@metamask/snaps-ui": "^0.35.2-flask.1",
"@metamask/utils": "^5.0.2",
"buffer": "^6.0.3",

6. yarn install
7. yarn workspace snap test should now fail with issues on the markers as described above.
8. Revert the package.json.
9. yarn install
10. yarn workspace snap test should fail even though dependencies are in theory the same as when we began.
11. rm -rf node_modules && yarn install
12. yarn workspace snap test should fail.
13. yarn cache clean && rm -rf node_modules && yarn install
14. yarn workspace snap test should fail.

[l-monninger]

Disregard the above. The third time failed to produce the same effect.

[l-monninger]

Okay, I think this was an issue with other dependencies in my package. Unfortunately, it was getting reported as the above, i.e., an issue with the test environment. Something to look out for!

[l-monninger]

@Mrtenz this may be better for a separate thread. But, is there a fake for the SnapGlobalObject--something I could inject into snaps classes that would allow to write unit tests without running in the e2e environment?

[Mrtenz]

Not at the moment, it only supports end-to-end tests. I've been thinking about something like that though, but there's nothing in the pipeline currently.

[l-monninger]

@Mrtenz Any idea how to use this to work with the keyring API? I'm trying to add tests that confirm the behavior of the KeyringRpcClient.

I think doing something like the is resulting in a superstruct assertion issue.

const { request } = await installSnap();
const response = await request({
      origin : "Jest",
      method : SnapKeyringMethod.CreateAccount,
      params : {
        "options" : {
          "name" : "my-account"
        }
      }
 });

And, I can't figure out how to use some rewrapping of the Snap object (particularly its request method) as a drop in for a MetaMaskInpageProvider.

[Mrtenz]

Unfortunately the keyring API is not supported yet, as this is still under heavy development. Once it's more stable, we will add it to the testing framework.

[AMIRKHANEF]

"Hi, I'm working on writing tests on our Snap using '@metamask/snaps-jest', but I keep encountering an error:
I wrote a test like this

const response = await request({
      method: 'getAddress',
});

in the response to this request, snap will send a request to metamask, like this:

const BIP44CoinNode = (await snap.request({
    method: 'snap_getBip44Entropy',
    params: {
      coinType: DEFAULT_COIN_TYPE,
    },
  })) as JsonBIP44CoinTypeNode;

and I believe this request will make this error:
{"code": -32603, "data": {"cause": {"message": "Unauthorized to perform action. Try requesting the required permission(s) first. For more information, see: https://docs.metamask.io/guide/rpc-api.html#permissions", "stack": "Error: Unauthorized to perform action. Try requesting the required permission(s) first. For more information, see: https://docs.metamask.io/guide/rpc-api.html#permissions"}}}

would you help me to fix this issue, please?
JFYI all the permissions that used in the snap can be found in the initialPermission part in the snap.manifest.json

[Mrtenz]

Hmm, that seems odd. Do you have an example of how to use the API, so I can test it?

[AMIRKHANEF]

To establish an API connection, you can use the following code:

import { ApiPromise, HttpProvider } from '@polkadot/api';

async function getApi() {
    const httpEndpointURL = 'https://dot-rpc.stakeworld.io';
    const httpProvider = new HttpProvider(httpEndpointURL );

    const api = await ApiPromise.create({ provider: httpProvider });

    return api.isConnected; // true || false
}

You can incorporate this function into your onRpcRequest handler:

export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {

  switch (request.method) {
    case 'establishApi':
      return await getApi();
    default:
      throw new Error('Method not found in the snap onRpcRequest.');
  }
};

and in your test case:

describe('onRpcRequest', () => {
    it('establish API connection', async () => {
        const { request, close } = await installSnap();

        const response = await request({
            method: 'establishApi'
         });

         expect(response ).toBe(true);

         await close();
    });
 });

thanks for your time!

[AMIRKHANEF]

Hello, any updates sir?

[Mrtenz]

Sorry for the delay again! I just got around to testing this. Using a simple Snap that returns api.isConnected, I'm getting true as a result, though, so I can't reproduce the issue. Are you using network mocking in your tests? It would be helpful if you could create a minimal reproduction, so I can investigate further.

[AMIRKHANEF]

Thank you sincerely for your assistance and time.
I've identified that the issue lies on my end due to a poor internet connection, and it's not related to snap or snaps-jest library.
Your support is greatly appreciated, and I apologize for any inconvenience.
Thank you again!

[NoahJinnn]

Hi! I'm currently implementing tests between snap and backend APIs. There's 1 endpoint that is authenticated by JWT and I'm trying to mock the network call to that endpoint as below:

const sendMsgUrl = baseUrl + `/sendMessage`;
await mock({
		url: sendMsgUrl,
		response: {
			contentType: 'application/json',
			body: JSON.stringify({ response: {} }),
                },
});

• Expect: Success call
• Actual: Backend responses with 401 error

"token is not correct or expired"

• Perhaps, the error is returned when Snap calls the real API while executing code.
• Is there a way to mock my HTTP client JS module?
• Or is it a way to implement this situation correctly?

Thanks for your great work!

[Mrtenz]

Hey! Thanks for trying it out. This looks like it could be a bug in the network mocking functionality. How are you calling the API in your Snap?

[NoahJinnn]

Below is how I call the API:

const modifiedFetch = async (input: RequestInfo | URL, init?: RequestInit) => {
	return await fetch(input, init)
		.then(async (data) => {
			const temp: Response = await data.json();
			if (temp.error) {
				throw new SnapError(temp.error, SnapErrorCode.FirebaseError);
			} else return temp.response;
		})
		.catch((error) => {
                  // error handling
                });
};

export const sendMessage = async <T>(
	token: string,
	type: string
	conversation: T | null,
	expectResponse: boolean,
	docId?: string,
) => {
	const url = baseUrl + `/sendMessage`;
	const data: T | null = await modifiedFetch(url, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			authorization: `Bearer ${token}`,
		},
		body: JSON.stringify({
			collection: type,
			data: conversation,
			expectResponse,
			docId,
		}),
	});
	return data;
};

[AnthonyLaw]

Hi there, I have an issue when running my test after I upgraded from @metamask/[email protected] to @metamask/[email protected]

My project is in JS ES6, wondering how to fix it.

Error:

> [email protected] test
> NODE_OPTIONS=--experimental-vm-modules jest

 FAIL  test/index_spec.js
  ● Test suite failed to run

    SyntaxError: The requested module 'chalk' does not provide an export named 'bold'

      at Runtime.linkAndEvaluateModule (node_modules/jest-runtime/build/index.js:708:5)

[Mrtenz]

Does this happen without snaps-jest as Jest environment as well? We don't change anything to how Jest processes dependencies.

[AnthonyLaw]

nope, as long as @metamask/snaps-jest imported, the error will raise.

let me share my config here.

jest.config.js

const jestConfig = {
	preset: '@metamask/snaps-jest',
	testMatch: ['**/test/**/*_spec.js'],
};

export default jestConfig;

package.json

"dependencies": {
    "@metamask/snaps-cli": "^6.0.2",
    "@metamask/snaps-sdk": "^3.1.0"
  },
  "devDependencies": {
    "@jest/globals": "^29.7.0",
    "@metamask/eslint-config": "^12.0.0",
    "@metamask/eslint-config-jest": "^12.1.0",
    "@metamask/snaps-jest": "^6.0.0",
    "eslint": "^8.45.0",
    "jest": "^29.7.0"
  }

[huweihong]

I wrote a snap test, the output is MetaMask: Connected to chain with ID "0x01", can we change the chain 0x01 to other chains in the test codes? @Mrtenz

[Mrtenz]

At the moment the chain ID is hardcoded to 0x01. There isn't an underlying JSON-RPC provider at the moment, so even if it was possible to change the chain ID, you couldn't do much with it.

There is a very basic mockJsonRpc function you could use to test JSON-RPC calls though. Does that cover your use case?

const { mockJsonRpc } = await installSnap(...);
const mock = mockJsonRpc({
  method: 'eth_someMethod',
  result: '0x1234',
});

// ...

mock.unmock();

[huweihong]

thanks！