Forge bundling errors on Typescript jest tests

I’ve started adding typescript modules to my Forge app - this seems to deploy and run just fine. I also am using jest for testing my server side code. I find I can write these tests in both javascript and typescript and they run as expected. However, when I attempt to run the Forge tunnel with a typescript jest test in my project, I get many errors during the bundling regarding the jest definitions used in the typescript test cases. For example:

=== Bundling code...

Error: TypeScript errors in the app caused the bundling to fail. Fix the errors listed below before rerunning the command. [tsl] ERROR in /app/src/dependencyGraph.test.ts(18,1)
      TS2582: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.[tsl] ERROR in /app/src/dependencyGraph.test.ts(38,3)
      TS2304: Cannot find name 'beforeEach'.[tsl] ERROR in /app/src/dependencyGraph.test.ts(43,3)
      TS2582: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.[tsl] ERROR in /app/src/dependencyGraph.test.ts(46,5)
      TS2304: Cannot find name 'expect'.[tsl] ERROR in /app/src/dependencyGraph.test.ts(47,5)

I have added @types/jest to my package.json dependencies but the errors persist. I’m thinking the test files really shouldn’t even be included in the bundle but I’m not sure how to tell forge that.

Any ideas how to resolve this?

@danielwinterw I saw you comment earlier on how to use typescript in Forge, do you have any thoughts on the matter?

1 Like

Hi @jeffryan
Do you have tsconfig.json in your project? Could you share it, please?
Mine looks like this: Bitbucket

Hi @Dmitrii,
I should clarify that I am doing all of this in server side code (not custom ui code) so in this case forge handles all the bundling and it seems largely hidden from me.

To answer your question though, no I do not have a tsconfig.json file in the project. I had considered creating one but wasn’t sure I really needed one since Forge seems to be building and executing my other typescript parts just fine. It is only complaining in the ts testcase parts where I am referencing the jest components.

It looks like your tsconfig file is setup for client react code. I’ll experiment with creating one for server side but I’m not sure if forge will pick it up.

@jeffryan

I should clarify that I am doing all of this in server side code (not custom ui code) so in this case forge handles all the bundling and it seems largely hidden from me.

Same in my case. My app uses UI Kit so functions invocations happen on the server side: Bitbucket.

To answer your question though, no I do not have a tsconfig.json file in the project. I had considered creating one but wasn’t sure I really needed one since Forge seems to be building and executing my other typescript parts just fine. It is only complaining in the ts testcase parts where I am referencing the jest components.

Got it. You can rely on Forge’s own tsconfig but it can’t work for everyone. For instance, not everyone runs jest tests and it doesn’t feel right to include more dependencies for people who won’t use them. My recommendation to you is to include your own tsconfig.json. Unfortunately, there’s no way to extend Forge’s own tsconfig right now.

1 Like

My recommendation to you is to include your own tsconfig.json. Unfortunately, there’s no way to extend Forge’s own tsconfig right now.

Thanks. I’ll give that a try… It would be nice to know what settings they use by default so that I don’t clobber something important. A forge base config would be nice.

@jeffryan Agreed. Could you please add this feature request in FRGE project? Log in with Atlassian account

done: [FRGE-649] - Ecosystem Jira

@Dmitrii Is there any way to know what settings Forge uses by default for its tsconfig file? I tried building a tsconfig similar to yours and the tunnel seemed to start but my app extensions were not being loaded properly. I then played around with the module, moduleResolution, and target settings and I got it to work but I’m still a little leery that I might be trouncing something.

Ideally we could do the extend base method because the only setting I want to provide is

"exclude": ["./src/**/*.test.*"]

But instead I have 20 lines of settings that I’m worried will clobber Forge settings today or in a future release. Kind of has me leaning towards just using js for my jest tests.

BTW, for anyone else who stumbles upon this thread, here’s the contents of the tsconfig.json file I got working:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "esModuleInterop": true,
    "jsx": "react",
    "jsxFactory": "ForgeUI.createElement",
    "module": "es6",
    "moduleResolution": "classic",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "pretty": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "target": "es6"
  },
  "include": ["./src/**/*", "./e2e-app/**/*"],
  "exclude": ["./src/**/*.test.*"]
}

Hi @jeffryan , Forge is trying to use the tsconfig.json file from the app (${appDirectory}/tsconfig.json) if provided, with the override:

compilerOptions: {
    jsx: 'react',
    jsxFactory: 'ForgeUI.createElement'
}

So feel free to customize your ts config except for these 2 fields above (you can still set different values, just it won’t work because of the override).

Forge will use the default ts settings when the config file is not provided.

Hope that answers your question.

3 Likes

That works! Thanks @JingYuan

My tsconfig.json file is now simply

{
  "exclude": ["./src/**/*.test.*"]
}

And the test cases are now ignored during bundling.
Thanks @Dmitrii for your input as well.

2 Likes

@jeffryan Thank you! This saved my bacon!

1 Like