nx: getComponentFromError when running Jest in webstorm

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"],
};

@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" ]
}

@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…

Options: setupTestFrameworkScriptFile and setupFilesAfterEnv cannot be used together. 😞

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')],
    },
  }

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

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