Nx: Running Jest from within PHPStorm

[michelcve]

When running a unit test with Jest for a component that has an import starting with an @, Jest can't resolve the path, and will throw an error similar to this:

Cannot find module '@webfrontendclient/states/ngrx-helpers' from 'account-anonymous.ts'

[michelcve]

It's my bad. I didn't use the npm/yarn test command but instead ran jest using the top level jest config file. When I run the tests through npm/yarn test, all seems well.

Unfortunately my IDE (PHPStorm) doesn't work well with running jest via npm/yarn :-(. Any solutions for that?

[skydever]

hi @michelcve

came across this kind of issue too, maybe #747 is useful for you somehow? how do you integrate jest within your IDE? I am using vscode, how does your current setup in your IDE look like? how is it done there? would be interesting to know...

ps: from .ts? why is that?

[michelcve]

@skydever I'm using PHPStorm, configuring Jest is described here:

https://www.jetbrains.com/help/phpstorm/running-unit-tests-on-jest.html

I cannot use the trick on #747, since I'm only allowed to pick a Jest package (or some react scripts thingy), so I can't run NPM from there.

I did try making a 'fake' jest package, which calls NPM, but the IDE isn't picking up the output correctly, so that didn't quite work.

As for the .ts... well, the file 'account-anonymous.ts' has the 'import @webfrontendclient/states/ngrx-helpers', so that's why it's referring to that .ts file.

[michelcve]

Another thing I'm trying right now is to get jest running without the npm scripts.

I managed to solve the @ imports by changing the jest.config.js to this:

module.exports = {
  "globals": {
    "__TRANSFORM_HTML__": true
  },
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js',
  },
  resolver: '@nrwl/builders/plugins/jest/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  collectCoverage: true,
  coverageReporters: ['html', "lcov"],
  moduleNameMapper: {
    "webfrontendclient/(.*)/src/(.*)": "<rootDir>/libs/$1/src/$2",
    "webfrontendclient/(.*)": "<rootDir>/libs/$1/src/index.ts",
  },
  "transformIgnorePatterns": [
    "node_modules/(?!@ngrx)"
  ]
};

However, I have two errors remaining after that, that still need to be addressed:

1. TypeError: Cannot read property 'getComponentFromError' of null

TypeError: Cannot read property 'getComponentFromError' of null

    at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (C:\data\serviantsuite\src\frontends\packages\core\testing\src\test_bed.ts:401:46)
    at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.execute (C:\data\serviantsuite\src\frontends\packages\core\testing\src\test_bed.ts:492:10)
    at Object.<anonymous> (C:\data\serviantsuite\src\frontends\packages\core\testing\src\test_bed.ts:698:40)
    at Object.asyncJestTest (C:\data\serviantsuite\src\frontends\webfrontend\webfrontendclient\node_modules\jest-jasmine2\build\jasmine_async.js:108:37)
    at resolve (C:\data\serviantsuite\src\frontends\webfrontend\webfrontendclient\node_modules\jest-jasmine2\build\queue_runner.js:56:12)
    at new Promise (<anonymous>)
    at mapper (C:\data\serviantsuite\src\frontends\webfrontend\webfrontendclient\node_modules\jest-jasmine2\build\queue_runner.js:43:19)
    at promise.then (C:\data\serviantsuite\src\frontends\webfrontend\webfrontendclient\node_modules\jest-jasmine2\build\queue_runner.js:87:41)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

1. 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"

Still looking into these two at the moment.

[michelcve]

Coverage integration works somewhat, by adding the "lcov" option to the coverageReports in jest.config.ts. and combining that with a batch file that creates a lcov.info file in the root of the coverage directory, that is a concatenation of all lcov.info files from all subdirectories.

You should run that batch file after e.g. npm affected:test -- --base=master

fixCoverageForPHPStorm.bat:

@echo off

REM Change directory to location of batch file
pushd %~dp0

REM Enter coverage directory if it exists
if exist coverage (
    cd coverage

    REM Remove old lcov.info
    del lcov.info

    REM Generage new one
    for /r "." %%F in (lcov.info) do type "%%F" >>lcov.info

    echo New lcov.info generated.
)

[michelcve]

Okay, I spoke too soon. Actually #747 did help me a lot, thanks!

I now have jest integration in PHPStorm working (although it runs all tests, not just the affected). Personally, I'm very happy with how it works.

This is what I ended up doing:

1) Modified jest.config.js to:

module.exports = {
  "globals": {
    "ts-jest": {
      "tsConfigFile": "tsconfig.spec.json"
    },
    "__TRANSFORM_HTML__": true
  },
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js',
  },
  resolver: '@nrwl/builders/plugins/jest/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  collectCoverage: true,
  coverageReporters: ['html', "lcov"],
  setupTestFrameworkScriptFile: "./test-setup.ts"
};

1. Added test-setup.ts in workspace root:

import 'jest-preset-angular';

1. Added tsconfig.spec.json in workspace root:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc/global-custom-jest-integration",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

[david-shortman]

Okay, I spoke too soon. Actually #747 did help me a lot, thanks!

I now have jest integration in PHPStorm working (although it runs all tests, not just the affected). Personally, I'm very happy with how it works.

This is what I ended up doing:

1. Modified jest.config.js to:

module.exports = {
  "globals": {
    "ts-jest": {
      "tsConfigFile": "tsconfig.spec.json"
    },
    "__TRANSFORM_HTML__": true
  },
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js',
  },
  resolver: '@nrwl/builders/plugins/jest/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  collectCoverage: true,
  coverageReporters: ['html', "lcov"],
  setupTestFrameworkScriptFile: "./test-setup.ts"
};

1. Added test-setup.ts in workspace root:

import 'jest-preset-angular';

1. Added tsconfig.spec.json in workspace root:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc/global-custom-jest-integration",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

Bro you are my hero.

[PhilippeMorier]

Because I landed here via google... https://github.com/nrwl/nx/issues/1439#issuecomment-561268656 was the solution which worked for me.

1. Add setupFilesAfterEnv: ['./src/test-setup.ts'] into you jest.config.js
2. Run Test directly in WebStorm (first failed)
3. Edit Configurations.. and select the proper jest.config.js as Configuration file of your app/lib