Jest testing of Custom UI components

In developing a new Forge application I’ve set about writing JEST unit tests for both the server side code as well as the Custom UI code. I have had success on the server side, mocking out forge api’s as needed. However, I cannot seem to get unit tests in the Custom UI to work.

Specifically Custom UI modules that import @forge/bridge fail as Jest complains that it cannot find the module being imported. This seems related to the bridge module’s package.json declaring its entry point using the keyword ‘browser’ rather than ‘main’. But it likely goes deeper than that.

The lone Custom UI example app I saw that included Jest only did simple comparison testing and did not mock any @forge services and thus avoided the issue.

So I am wondering what is the proper way to unit test Custom UI components with Jest?

The Custom UI examples all show importing @forge modules directly into app components but perhaps a better strategy is to import them in a containing module and pass them in via properties or context?

Any other suggestions?

Best Regards,
Jeff Ryan

10 Likes

Hey @jeffryan, I’ve just encountered this same issue and have posted a response in this similar thread: Testing Forge Custom UI components Using Jest - #10 by joshp - hope this works for your use case too.

Thanks @joshp! I ended up doing something similar which I posted in the thread you mentioned. I should have come back here after I came up with that. I’ve made some similar mocks in the server side to mock a few other forge services such as storage. It’d be nice to mock the api calls too but I haven’t gone too far down that path yet.

2 Likes