# Introducing mockzilla and mockzilla-webextension for easy web-extension testing with jest

**URL:** <https://discourse.mozilla.org/t/introducing-mockzilla-and-mockzilla-webextension-for-easy-web-extension-testing-with-jest/59159>\
**Category:** Development\
**Created:** [May 1, 2020, 4:03pm UTC](https://discourse.mozilla.org/t/introducing-mockzilla-and-mockzilla-webextension-for-easy-web-extension-testing-with-jest/59159 "2020-05-01T16:03:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lusito](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/lusito/32/4767_2.png) [@Lusito](https://discourse.mozilla.org/u/Lusito)\
**Post date:** [May 1, 2020, 4:03pm UTC](https://discourse.mozilla.org/t/introducing-mockzilla-and-mockzilla-webextension-for-easy-web-extension-testing-with-jest/59159/1 "2020-05-01T16:03:45Z")

</div>

# Background:

I’m currently in the process of heavily rewriting my web-extension forget-me-not.

I already have over 300 tests in place, but more are expected to come, and my old approach of [creating a simulation of a browser](https://github.com/Lusito/forget-me-not/blob/develop/test/browserMock.ts) was not something I wanted to keep maintaining, especially since that approach made it hard to cover all the different browser targets.

When I was in london last year to [meet with Mozilla and other extension developers](https://gist.github.com/Lusito/dd6b76b93f83267903619103745cc4fd), I received a lot of questions on how I test my web-extensions. Back then I had to tell them, that most of the stuff I do is custom-tailored to my extensions need.

# Trying to Find a Better Solution

I lately switched most of my other TypeScript projects to tests with [jest](https://jestjs.io/), so I thought it might be a good idea to use jest for forget-me-not as well.

With jest you can mock entire npm packages. But it’s not very comfortable to use for a deeply nested API like `browser`.

Some time ago I had a deeper look at the js [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) class and it seemed like a good choice to dynamically create mocks on the fly.

With the addition of the types from the [webextension-polyfill-ts](https://github.com/lusito/webextension-polyfill-ts) project and some TypeScript-Fu, I was able to create a deep-mocking library, which makes mocking quite simple.

# Resulting Projects

[mockzilla](https://lusito.github.io/mockzilla/) is the first project that came out of this. This project is generic and has no ties to web-extensions. So you can use this for any API you want!

[mockzilla-webextension](https://lusito.github.io/mockzilla-webextension/) makes use of mockzilla to provide a global mockBrowser object (to declare expectations) and automatically provide a global browser mock instance as well (which your logic will use). It also provides a helper to make mocking and testing events easier.

# Feedback

While I’m still in the process of finding out how I want my tests to work, I would like to gather some feedback from you to see if you have any additions or criticism on some of the approaches.

Additionally it would be awesome if there are developers who would be willing to contribute to these projects.

Cheers

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [August 27, 2020, 1:33pm UTC](https://discourse.mozilla.org/t/introducing-mockzilla-and-mockzilla-webextension-for-easy-web-extension-testing-with-jest/59159/2 "2020-08-27T13:33:58Z")

</div>

You are amazing @Lusito! This was a huge help.  
I’ve started to write unit tests with Jest only recently and I was avoiding functionality that was using `browser` API because it didn’t worked of course 🙂.

But thanks your great libraries I can now test everything! 🥳  
And it’s easy and it’s even type safe!!!

**Thank you for making my life easier!**