Testing Forge Custom UI components Using Jest

I am developing a new Forge application and I’ve set about writing JEST unit tests. However, I cannot seem to get unit tests in the Custom UI to work. I get the below error message

  Cannot find module '@forge/bridge' from 'src/components/App.tsx'

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 in Jira Forge Custom UI?

Thanks!

2 Likes

@KankeIshaku did you run the “npm install” before you ran “jest”?

Yes and it seems I am not the only one having this issue. This was raised back in April and no one replied.

Can you please kindly assist?

@KankeIshaku I ran “npm install” and then ran “npm test”. Here’s my output:

➜  forge-daci-helper git:(master) npm i
added 725 packages from 438 contributors and audited 726 packages in 10.953s

20 packages are looking for funding
  run `npm fund` for details

found 48544 vulnerabilities (25850 low, 41 moderate, 22653 high)
  run `npm audit fix` to fix them, or `npm audit` for details

➜  forge-daci-helper git:(master) npm test

> forge-ui-starter-typescript-experimental@0.0.0 test /Users/dsorin/atlassian/forge-daci-helper
> jest

 PASS  src/test/AdfUtil.test.ts
 PASS  src/test/DaciChecker.test.ts

Test Suites: 2 passed, 2 total
Tests:       11 passed, 11 total
Snapshots:   0 total
Time:        1.446s, estimated 3s
Ran all test suites.

This repo doesn’t have a @forge/bridge dependency in its package.json. Did you add it?

Your example above which is from this project doesn’t use Forge Custom UI.

I created the project using the Forge Project Page Jira Custom UI template which adds @forge/bridge into the package.json in the /static/ directory by default, I didn’t add this manually. Removing it means I can’t use the invoke method.

Here is an example of an app custom UI app created by yourselves clearly showing @forge/bridge as a dependency in the package.json of the /static/src/ directory.

If the Custom UI Bridge dependency is missing, how is our app able to securely securely integrate with Atlassian products? Here is your documentation which clearly states this.

Below is the simple Jest test and output from it;

describe('HomePage', () => {
    test('basic', async () => {
        render(<App />)
    });
});

Surely you should know this?

Hi Kankelshaku,
Whilst i’ve not gotten as far as CustomUI Jest testing procedure, but am interested in doing so and also face problems with both invoke from forge/bridge and api from forge/api being in the /static directory (hence here).
Did you see the recent post regarding Resolvers for CustomUI? 27 Jul 2021 - Direct product requests, CI upgrade support, and composable routes

(You may not need to use forge bridge if you want to access Confluence/Jira endpoints, and if the getText method is just returning a String you could try the following instead of the invoke:)

//Replace the invoke('getText'..) with the following:
let myInvoke = new ExtractedInvoke();
        return await myInvoke.getText();

Then a new file, named ‘ExtractedInvoke’ would be:

export class ExtractedInvoke {
    async getText() {
               //Whatever your 'getText' was doing here..
     }
}

export default ExtractedInvoke;

This workaround means you don’t need the forge/bridge import.

1 Like