Issue with Angular 8: src/tsconfig.spec.json => tsconfig.spec.json

[yjaaidi]

Hi there,

Since Angular 8, tsconfig.spec.json isn’t in ˋsrc` anymore but in the parent folder.
Shall we change the default path in order to avoid overriding it in the configuration?

Cf. briebug/jest-schematic#12

Thanks

[wtho]

I personally agree, as we want to make the use of jest for Angular users as easy as possible.

PRs are welcome!

This will be a breaking change and should be documented in README.md and CHANGELOG.md.

[yjaaidi]

Thanks @wtho for your quick reply.
First, I've got to make sure that migrating an Angular project from 7 to 8 moves the tsconfig.spec.json to the parent directory.
I'll send a PR as soon as I can. If anyone wants to work on this issue, please let me know.

[sfabriece]

my migration to 8 didn't move it to the parent @yjaaidi

[wtho]

Yeah, they only do this in newly generated Angular8 projects.

As we will support v7 and older as well as migrated projects, we will have to explain this in the migration guide.

I have not looked into the original change in the Angular repo, there might be a discussion that can help us to decide what to put as the default. I personally would interpret this change as that the recommended location now is in /, whereas before it was in /src. Anyway you can still configure it to be wherever you want, for Angular and jest.

[mnicic]

As temporary solution, you can add this configuration into jest.conf.js file:

  globals: {
    'ts-jest': {
      tsConfig: '<rootDir>/tsconfig.spec.json'
    },
  },

[dgroh]

As temporary solution, you can add this configuration into jest.conf.js file:

  globals: {
    'ts-jest': {
      tsConfig: '<rootDir>/tsconfig.spec.json'
    },
  },

Now I get this error:

TypeScript diagnostics (customize using [jest-config].globals.ts-jest.diagnostics

[dgroh]

This now should work:

module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/setupJest.ts'],
    globals: {
        'ts-jest': {
          tsConfig: '<rootDir>/tsconfig.spec.json',
          diagnostics: false
        },
      },
};

[basickarl]

@dgroh
Getting the following error after that configuration:

FAIL  tests/client/unit/app.component.test.ts
  AppComponent
    ✕ the title is 'mop' (608ms)

  ● AppComponent › the title is 'mop'

    Illegal state: Could not load the summary for directive AppComponent.

      at syntaxError (../packages/compiler/src/util.ts:100:17)
      at CompileMetadataResolver.getDirectiveSummary (../packages/compiler/src/metadata_resolver.ts:423:11)
      at JitCompiler.getComponentFactory (../packages/compiler/src/jit/compiler.ts:73:44)
      at CompilerImpl.getComponentFactory (../packages/platform-browser-dynamic/src/compiler_factory.ts:77:27)
      at TestingCompilerImpl.getComponentFactory (../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:61:27)
      at TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:595:45)
      at Function.TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:247:36)
      at tests/client/unit/app.component.test.ts:7:29
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:26)
      at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:106:39)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:126:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.runGuarded (node_modules/zone.js/dist/zone.js:161:47)
      at runInTestZone (node_modules/zone.js/dist/async-test.js:234:29)
      at node_modules/zone.js/dist/async-test.js:168:17
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:129:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:150:43)
      at Object.testBody.length.done (node_modules/jest-preset-angular/zone-patch/index.js:53:29)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.169s
Ran all test suites.

[basickarl]

Got it working with the following config:

console.log('loading jest.config.js file');
module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/tests/client/jest-setup.ts'],
    globals: {
        'ts-jest': {
            tsConfig: '<rootDir>/tsconfig.test.json',
            diagnostics: true,
            stringifyContentPathRegex: '\\.html$',
            astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
        },
    }
};

The big problem that solved it for me is that on the following page: https://github.com/thymikee/jest-preset-angular#exposed-configuration

It states: astTransformers: [require.resolve('./InlineHtmlStripStylesTransformer')],
Which is correct for the actual preset module. But when overriding and making your own jest.config.js you must change that to astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],.

[schuchard]

The Jest schematic referenced in this issue has been updated for Angular 8. https://github.com/briebug/jest-schematic