Implement better env var handling with IntelliJ Jest runner

[vanakema]

Problem I'm having

When using IntelliJ's "jest" runner, it will not use the .env file's variables, like it will when you use nx:test.

Workaround

You can use the dotenv package to get this to work, but then the behavior experienced when running tests through the IntelliJ gutter buttons may not match Nx's .env file handling behavior (ex. Nx has a hierarchy of priority of different types of .env files it will load, which can be found here).

You could technically try and duplicate this behavior in code with dotenv, but you'd be doing so simply for making IntelliJ's test runner work, and it's not good practice to have production code that is specifically written just to make tests pass.

Final thoughts/notes

I have never made an IntelliJ plugin, and I won't pretend I know anything about how state or configuration can be shared between plugins, but it would be awesome if you could somehow essentially override the executable that IntelliJ is using, to instead run it through Nx when you hit the gutter buttons.

Maybe it's possible without any changes in the Nx plugin already (in which case, please let me know!), but it would still be preferable if Nrwl projects would do this automatically when hitting test gutter buttons.

@iguissouma Just want to give you a shout out for making this awesome plugin, and being so helpful.

[iguissouma]

Hello, thanks for this feedback.

I looked to the jest runner configuration and it seems that you can specify a different jest package(@angular/cli, @vue/cli-service...) but not yet @nrwl/cli. As a workaround, you can try to use @nrwl/cli like if it's @angular/cli: -Use any workaround to make @nrwl/cli matches @angular/cli (like copy paste node_modules/@nrwl to a new directory and called it @angular) -As jest package specify the new @angular/cli(equivalent to @nrwl/cli)

You can have a configuration that looks like this(I just copied @nrw as @angular on my root project):

The tests will be ran using nx cli:

At least this should work for angular tests...

Hope this can help. I think this should be implemented on the JavaScript WebStorm plugin side, I will get touch with the WebStorm team and see what can be done.

[AliYusuf95]

@vanakema As a workaround, I set the working directory path of jest template to the current project working dir

Also I added test-setup.ts file in my app to load dotenv:

// apps/my-app/src/test-setup.ts
import * as dotenv from 'dotenv';
dotenv.config();

and added this file to setupFilesAfterEnv in my app jest.config.js

module.exports = {
//...
    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
//...

and it seems to work fine now.