Nx: getComponentFromError when running Jest in webstorm

[jogelin]

Ticket to provide the solution for people that meet the issue when running jest tests by using @nrwl/builders:jest + webstorm.

Tests are running well by using ng test but don't run when using webstorm + jest:

TypeError: Cannot read property 'getComponentFromError' of null

    at TestBedViewEngine._initIfNeeded (/home/user/dev/packages/core/testing/src/test_bed.ts:393:46)
    at TestBedViewEngine.get (/home/user/dev/packages/core/testing/src/test_bed.ts:473:10)
    at Function.TestBedViewEngine.get (/home/user/dev/packages/core/testing/src/test_bed.ts:243:36)
    at Object.get (/home/user/dev/company/project/node_modules/@netbasal/spectator/bundles/ng:/@netbasal/spectator/lib/service.ts:56:22)
    at Object.<anonymous> (/home/user/dev/company/project/apps/sot-desktop/src/app/features/station-note/station-plan.state.service.spec.ts:16:39)
    at Object.asyncJestLifecycle (/home/user/dev/company/project/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
    at resolve (/home/user/dev/company/project/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
    at new Promise (<anonymous>)
    at mapper (/home/user/dev/company/project/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
    at promise.then (/home/user/dev/company/project/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)

This issue is related to #862 and #747

Libraries:

• @angular: 7.1.15
• @nrwl: 7.8.6
• @netbasal/spectator: 3.9.1
• jest: 24.8.0
• jest-preset-angular: 7.1.1
• ts-jest: 24.0.2

[jogelin]

The only config that I had to add in my apps/app-name/jest.config.js is setupFilesAfterEnv:

module.exports = {
  name: 'app-name',
  preset: '../../jest.config.js',
  coverageDirectory: '../../coverage/apps/sot/',
  snapshotSerializers: [
    'jest-preset-angular/AngularSnapshotSerializer.js',
    'jest-preset-angular/HTMLCommentSerializer.js'
  ],
  // just add this line
  setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
};

[lmame]

@jogelin , thanks a lot, it solved my issue for Services, pipes etc...
Though for Component I have some strange errors.
It seems something is trying to load the component html template using http://localhost/.html

I am trying to tackle this through astTransformers but I was wondering if maybe you had already a workaround for this?

[ronnyek]

I too am running into this same problem...
Error: Uncaught (in promise): Failed to load icon.scss which is linked via styleUrls

Whilst still being able to execute tests at command, I simply cannot get them to execute from within webstorm itself

[lmame]

@ronnyek, ok so I found a solution, at least for us internally, it might work for you as well maybe (?).

We have a project with several libs. Each lib has its own jest.config.js which refer to the "main" jest.config.js.

I had to:

• Update jest-preset-angular to 7.1.1 (which you did),
• In each lib where you launch your unit test have a /src/ folder with a file "test-setup.js" with this content:
  import 'jest-preset-angular';
• Then add those lines in the main jest.config.js (at the end of the file):

   module.exports.globals = {
    'ts-jest': {
      tsConfig: 'tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$',
      astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')]
    }
  };

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

Check if this works.

Though I think it broke the command line execution because it seems Nrwl is using a deprecated command "setupTestFrameworkScriptFile" in their jest files instead of "setupFilesAfterEnv".

So we had to know when the test was launched from Webstorm or command line. For that I simply set an environment variable in the Webstorm Jest template:

Then in the jest.config.js I am testing if the environment variable is set or not:

if (process.env.WEBSTORM !== undefined) {
  module.exports.globals = {
    'ts-jest': {
      tsConfig: 'tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$',
      astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')]
    }
  };

  module.exports.setupFilesAfterEnv = ['<rootDir>/src/test-setup.ts'];
}

I guess you might have to adapt for your uses...

[ronnyek]

Tests that involve nothing with scss files, actually do run with what I had setup before... but there is something about this that is failing, but only when launched from webstorm.

It's currently complaining about not being able to load "icon.scss" which doesn't error.

I dont know if its related or not, but I noticed I get this output even when the other tests run and complete successfully.

ts-jest[config] (WARN) TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.

And all this is after trying to make some of the changes you suggested

[philly-vanilly]

Options: setupTestFrameworkScriptFile and setupFilesAfterEnv cannot be used together.
😞

[philly-vanilly]

So ATM I have the option between running the test in a pipeline or running individual tests via IntelliJ. One forbids using setupFilesAfterEnv, the other requires it.

[dsebastien]

Could this issue be reopened?
The problem actually seems to still be there and it feels utterly wrong to have to add an environment to the Jest config in IntelliJ/WebStorm to decide whether to adapt the configuration or not.

[dsebastien]

@wesleygrimes Wes, I don't know if you could chime in, or maybe pass the info to another Nx developer who knows about the Jest setup?

[SOHELAHMED7]

Reference to the key "setupFilesAfterEnv" is here: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

[ThomasBurleson]

@vsavkin - This problem still exists with Nx library schematics. It appears that developers must still manually apply this fix to the jest config:

{
  "setupFilesAfterEnv": [  "<rootDir>/src/test-setup.ts" ]
}

[nezed]

Found that specifying setupFile for builder overrides all and any setupFilesAfterEnv.

https://github.com/nrwl/nx/blob/9c50569c55090d5ec7d16d97ac9a829de5aea9b1/packages/jest/src/builders/jest/jest.impl.ts#L118-L122

[chaoyangnz]

My solution:

add setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"] to jest.conf.js and remove "setupFile": "<...>/src/test-setup.ts" in angular.json.

It works for both npm test and run with webstorm.

For some guys got the error: connect ECONNREFUSED 127.0.0.1:80 even all test passed when
run component tests, you probably need to add this to jest.conf.js:

  globals: {
    'ts-jest': {
      diagnostics: false,
      stringifyContentPathRegex: '\\.html$',
      astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
    },
  }

[ronnyek]

@chaoyangnz Have you been able to run tests against components that have external html files / css files?

[chaoyangnz]

@chaoyangnz Have you been able to run tests against components that have external html files / css files?

yup, all fine, components with inline and external html/css