Nx: Cannot run Jest tests from Webstorm

[BorisZubchenko]

Prerequisites

• [X] I am running the latest version
• [X] I checked the documentation (nx.dev) and found no answer
• [X] I checked to make sure that this issue has not already been filed
• [X] I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

I just want to run the tests from app.component.spec.ts from IntelliJ IDEA/WebStorm UI.

Current Behavior

I get an error.

Steps to Reproduce

1. Generate a new workspace (Angular+Nest).
2. Run any test (or all of them) from app.component.spec.ts with IntelliJ IDEA/WebStorm UI (Click on green triangle(s) near the line numbers).

Failure Logs

Error: Failed: "Zone is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/zone.js"
Error: 
    at Env.beforeEach (E:\testing\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:41:24)
    at beforeEach (E:\testing\node_modules\jest-jasmine2\build\jasmine\jasmineLight.js:111:29)
    at Suite.Object.<anonymous>.describe (E:\testing\apps\client\src\app\app.component.spec.ts:7:3)
    at addSpecsToSuite (E:\testing\node_modules\jest-jasmine2\build\jasmine\Env.js:496:51)
    at Env.describe (E:\testing\node_modules\jest-jasmine2\build\jasmine\Env.js:466:11)
    at describe (E:\testing\node_modules\jest-jasmine2\build\jasmine\jasmineLight.js:81:18)
    at Object.<anonymous> (E:\testing\apps\client\src\app\app.component.spec.ts:6:1)
    at Runtime._execModule (E:\testing\node_modules\jest-runtime\build\index.js:867:68)
    at Runtime._loadModule (E:\testing\node_modules\jest-runtime\build\index.js:577:12)
    at Runtime.requireModule (E:\testing\node_modules\jest-runtime\build\index.js:433:10)

[ajonp]

We are having the same issue with Angular.

[vladimirdrayling]

Same here.

I was able to configure with version NX 8.7.0, here is jest.config.js. Maybe it can be useful.

Usage in webstorm

To run within the webstorm you need to provide the IDE environment variable under Run/Debug Configuration.

Hope this issue can be fixed very soon :)

[raycashmore]

@vladimirdrayling Very useful, thank you. I just had to make a new a new file called setup-test.ts with import 'jest-preset-angular'; (as shown in your repo). I am productive now!

[ronnyek]

I think this one would be great to figure out... I've HAD this working with previous versions of nx, but just created brand new workspace with a new angular app... added IDE=true to environment variables, but still get that error trying to find zone.

I'm worried about the amount of hacking we've had to do historically in the past with older versions of nx... as I'm not sure its still able to run like its supposed to for run affected etc.

Outside of webstorm, ng test project seems to work fine

[ronnyek]

@vladimirdrayling, @raycashmore could you clarify what specifically you've changed from what came out of box NX? I'm definitely not seeing anything thats been able to fix ability to run tests from webstorm in the latest nx

[vladimirdrayling]

@ronnyek I have created nx-starter for my own purposes. Please, have a look to jest.config.js. This is the only file I've changed.

WebStorm's Run/Debug Configurations

[ronnyek]

@vladimirdrayling thanks! I feel like I needed to update more than just my jest.config.js, but was able to get things to work. Additionally, running ng test after applying your jest.config.js stopped working, but was able to fix (working both from webstorm and command line) by simply moving
module.exports.setupFilesAfterEnv = ['<rootDir>/src/test-setup.ts'];

outside the if(process.env.IDE){ block, so its always configured that way

[ndobrianskyi-lohika-tix]

As I see the workaround is applying near the same configuraion as the jest builder does

And it seems, that it could be solved from the nx console side (while generating the files). I wonder why builder was introduced in the first place? Does it _only_ apply some sensible defaults?

@vsavkin ^^^

[wrslatz]

FYI I believe the ability to use setupFilesAfterEnv option in root jest.config.js is broken now due to https://github.com/facebook/jest/pull/9495... Apps or libs that provide an override to setupFilesAfterEnv will now fail if the file name or path differ between between the app/lib jest config and root jest config.

I think this problem is captured in a separate issue https://github.com/nrwl/nx/issues/2344

[dsebastien]

I think that this issue deserves some love. I had a workaround in place but it doesn't work anymore, so I'm currently forced to run my Jest tests outside of IJ/WebStorm, which is far from ideal :(

[dsebastien]

I could make it work again with the following config, even though I'm really not sure of what's going on and don't have time now to dig deeper:

if (process.env.JETBRAINS !== undefined) {
  module.exports.globals = {
    "ts-jest": {
      ...tsJestBaseConfig,
      stringifyContentPathRegex: "\\.(html)$",
      astTransformers: [
        'jest-preset-angular/build/InlineFilesTransformer',
        'jest-preset-angular/build/StripStylesTransformer',
      ],
    },
  };
}

In my IDE, I have this as template for Jest tests:

[jsdevtom]

Thank you @dsebastien. Your solution worked for me!

[wrslatz]

This solution works, but it's a poor experience for new users onboarding to an existing repo. We have an large monorepo and each unique, one-off config like this makes onboarding more difficult.