Nx: Nx 8 -> 9 Upgrade causes Jest tests to not pass afterwareds

[yharaskrik]

Upgrading from Nx 8 to 9 causes Jest tests to fail with the following error:

The template specified for component MatIcon is not a string
      13 |             declarations: [CheckinNotFoundComponent],
      14 |             imports: [WordpressHeaderModule, ErrorNotFoundModule]
    > 15 |         }).compileComponents();
         |            ^
      16 |     }));
      17 | 
      18 |     beforeEach(() => {
      at syntaxError (../../node_modules/@angular/compiler/bundles/compiler.umd.js:2845:21)
      at DirectiveNormalizer.Object.<anonymous>.DirectiveNormalizer.normalizeTemplate (../../node_modules/@angular/compiler/bundles/compiler.umd.js:20469:27)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.loadDirectiveMetadata (../../node_modules/@angular/compiler/bundles/compiler.umd.js:22791:62)
      at ../../node_modules/@angular/compiler/bundles/compiler.umd.js:29278:59
          at Array.forEach (<anonymous>)
      at ../../node_modules/@angular/compiler/bundles/compiler.umd.js:29277:76
          at Array.forEach (<anonymous>)
      at JitCompiler.Object.<anonymous>.JitCompiler._loadModules (../../node_modules/@angular/compiler/bundles/compiler.umd.js:29274:79)
      at JitCompiler.Object.<anonymous>.JitCompiler._compileModuleAndAllComponents (../../node_modules/@angular/compiler/bundles/compiler.umd.js:29259:40)
      at JitCompiler.Object.<anonymous>.JitCompiler.compileModuleAndAllComponentsAsync (../../node_modules/@angular/compiler/bundles/compiler.umd.js:29216:41)
      at CompilerImpl.Object.<anonymous>.CompilerImpl.compileModuleAndAllComponentsAsync (../../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js:370:35)
      at TestingCompilerImpl.Object.<anonymous>.TestingCompilerImpl.compileModuleAndAllComponentsAsync (../../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js:330:35)
      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.compileComponents (../../node_modules/@angular/core/bundles/core-testing.umd.js:2764:35)
      at Function.Object.<anonymous>.TestBedViewEngine.compileComponents (../../node_modules/@angular/core/bundles/core-testing.umd.js:2625:33)
      at src/app/checkin-not-found/checkin-not-found.component.spec.ts:15:12
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:386:30)
      at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (../../node_modules/zone.js/dist/async-test.js:102:47)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/dist/proxy.js:114:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:385:36)
      at Zone.Object.<anonymous>.Zone.runGuarded (../../node_modules/zone.js/dist/zone.js:154:51)
      at runInTestZone (../../node_modules/zone.js/dist/async-test.js:224:33)
      at ../../node_modules/zone.js/dist/async-test.js:162:21
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:386:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:385:36)
      at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/dist/zone.js:143:47)

This error also happens with other component spec files just with other Material components.

The following is the migration file that Nx generated by following: https://nx.dev/angular/workspace/update

{
    "migrations": [
        {
            "version": "9.0.0-beta.1",
            "description": "Update typescript to 3.6 and angular/cli to version 9",
            "factory": "./src/migrations/update-9-0-0/update-9-0-0",
            "package": "@nrwl/workspace",
            "name": "update-9-0-0"
        },
        {
            "version": "9.1.0-beta.1",
            "description": "Update prettier to 1.19.1 with support for typescript 3.7; Update eslint and tslint",
            "factory": "./src/migrations/update-9-1-0/update-9-1-0",
            "package": "@nrwl/workspace",
            "name": "update-9-1-0"
        },
        {
            "version": "9.1.0-beta.1",
            "description": "Update eslint and tslint config to provide better IDE support",
            "factory": "./src/migrations/update-9-1-0/update-lint-config",
            "package": "@nrwl/workspace",
            "name": "update-lint-config-9-1-0"
        },
        {
            "version": "9.2.0-beta.1",
            "description": "Add cacheable operations to nx.json",
            "factory": "./src/migrations/update-9-2-0/update-9-2-0",
            "package": "@nrwl/workspace",
            "name": "update-9-2-0"
        },
        {
            "version": "9.3.0-beta.1",
            "description": "Update prettier to v2",
            "factory": "./src/migrations/update-9-3-0/update-9-3-0",
            "package": "@nrwl/workspace",
            "name": "update-9-3-0"
        },
        {
            "version": "9.4.0-beta.1",
            "description": "Remove config builder option when using eslint to enable automatic detection",
            "factory": "./src/migrations/update-9-4-0/update-eslint-config",
            "package": "@nrwl/workspace",
            "name": "update-eslint-config"
        },
        {
            "version": "9.4.0-beta.1",
            "description": "Fix exclude patterns in tslint and eslint to ensure it does not break linting when a files option is defined",
            "factory": "./src/migrations/update-9-4-0/update-linters-exclude",
            "package": "@nrwl/workspace",
            "name": "update-linters-exclude"
        },
        {
            "version": "9.4.0-beta.1",
            "description": "Decorate cli to enable computation caching",
            "factory": "./src/migrations/update-9-4-0/add-decorate-cli",
            "package": "@nrwl/workspace",
            "name": "add-decorate-cli"
        },
        {
            "description": "The road to v9",
            "version": "9-beta",
            "factory": "./9_0_0/index",
            "package": "@ngrx/effects",
            "name": "ngrx-effects-migration-02"
        },
        {
            "description": "The road to v9",
            "version": "9-beta",
            "factory": "./9_0_0/index",
            "package": "@ngrx/router-store",
            "name": "ngrx-router-store-migration-03"
        },
        {
            "version": "9.0.0-beta",
            "description": "Renderer to Renderer2 migration. As of Angular 9, the Renderer class is no longer available. Renderer2 should be used instead. Read more about this here: https://v9.angular.io/guide/migration-renderer",
            "factory": "./migrations/renderer-to-renderer2/index",
            "package": "@angular/core",
            "name": "migration-v9-renderer-to-renderer2"
        },
        {
            "version": "9.0.0-beta",
            "description": "Missing @Injectable and incomplete provider definition migration. In Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently. Read more about this here: https://v9.angular.io/guide/migration-injectable",
            "factory": "./migrations/missing-injectable/index",
            "package": "@angular/core",
            "name": "migration-v9-missing-injectable"
        },
        {
            "version": "9.0.0-beta",
            "description": "Undecorated classes with DI migration. As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes",
            "factory": "./migrations/undecorated-classes-with-di/index",
            "package": "@angular/core",
            "name": "migration-v9-undecorated-classes-with-di"
        },
        {
            "version": "9.0.0-beta",
            "description": "Undecorated classes with decorated fields migration. As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes",
            "factory": "./migrations/undecorated-classes-with-decorated-fields/index",
            "package": "@angular/core",
            "name": "migration-v9-undecorated-classes-with-decorated-fields"
        },
        {
            "version": "9-beta",
            "description": "Static flag migration. Removes the `static` flag from dynamic queries. As of Angular 9, the \"static\" flag defaults to false and is no longer required for your view and content queries. Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag",
            "factory": "./migrations/dynamic-queries/index",
            "package": "@angular/core",
            "name": "migration-v9-dynamic-queries"
        },
        {
            "version": "9.0.0-beta",
            "description": "ModuleWithProviders migration. In Angular 9, the ModuleWithProviders type without a generic has been deprecated. This migration adds the generic where it is missing. Read more about this here: https://v9.angular.io/guide/migration-module-with-providers",
            "factory": "./migrations/module-with-providers/index",
            "package": "@angular/core",
            "name": "migration-v9-module-with-providers"
        },
        {
            "version": "9.0.0-beta.1",
            "description": "Upgrades Angular and Angular CLI to 9.0.0",
            "factory": "./src/migrations/update-9-0-0/update-9-0-0",
            "package": "@nrwl/angular",
            "name": "update-9-0-0"
        },
        {
            "version": "9.4.0-beta.1",
            "description": "Add Cypress ESLint plugin",
            "factory": "./src/migrations/update-9-4-0/add-cypress-eslint-plugin-9-4-0",
            "package": "@nrwl/cypress",
            "name": "add-cypress-eslint-plugin-9.4.0"
        },
        {
            "version": "9.0.0-beta.1",
            "description": "Upgrades jest-preset-angular to 8.0.0",
            "factory": "./src/migrations/update-9-0-0/update-9-0-0",
            "package": "@nrwl/jest",
            "name": "update-9.0.0"
        },
        {
            "version": "9.0.1-beta.1",
            "description": "Correctly sets passWithNoTests option",
            "factory": "./src/migrations/update-9-0-1/update-9-0-1",
            "package": "@nrwl/jest",
            "name": "update-9.0.1"
        },
        {
            "version": "9.2.0-beta.3",
            "description": "Update jest to v25",
            "factory": "./src/migrations/update-9-2-0/update-9-2-0",
            "package": "@nrwl/jest",
            "name": "update-9.2.0"
        },
        {
            "version": "9.2.0-beta.1",
            "description": "Set buildLibsFromSource property to true to not break existing projects.",
            "factory": "./src/migrations/update-9-2-0/set-build-libs-from-source",
            "package": "@nrwl/node",
            "name": "set-build-libs-from-source"
        }
    ]
}

I also upgraded:

@angular/material to v9
@angular/flex-layout
@nguniversal/express-engine
@angular-material-extensions/google-maps-autocomplete

Associated Nrwl deps are v9.4.5

Nothing else was changed other than needing to update the test matching regex so that tests are found.

Let me know what I can provide to help track down what happened during the update.

[Cammisuli]

@yharaskrik what does your jest.config.js file look like in both the project and the root? Also, are you able to provide a reproduction with a different project?

[yharaskrik]

Hey @Cammisuli

Root:

let jestConfig = {
    name: 'angular-tests',
    testMatch: ['**/+(*.)+(spec|test).[tj]s?(x)'],
    transform: {
        '^.+\\.(ts|js|html)$': 'ts-jest',
    },
    resolver: '@nrwl/jest/plugins/resolver',
    transformIgnorePatterns: [],
    testEnvironment: 'jsdom',
    moduleFileExtensions: ['ts', 'js', 'html'],
    collectCoverage: true,
    coverageReporters: ['json', 'html', 'lcov', 'text', 'clover'],
    snapshotSerializers: [
        'jest-preset-angular/build/AngularSnapshotSerializer.js',
        'jest-preset-angular/build/HTMLCommentSerializer.js',
    ],
};

if (process.env.IDE) {
    jestConfig = {
        ...jestConfig,
        globals: {
            'ts-jest': {
                tsConfig: './tsconfig.spec.json',
                stringifyContentPathRegex: '\\.html$',
                astTransformers: ['jest-preset-angular/InlineHtmlStripStylesTransformer'],
                isolatedModules: true,
            },
        },
        testPathIgnorePatterns: [
            '<rootDir>/apps/dashboard-e2e',
            '<rootDir>/apps/dashboard-e2e',
            '<rootDir>/apps/auction-e2e',
            '<rootDir>/apps/embed-api',
            '/apps/checkout-e2e//',
            '<rootDir>/apps/checkin-e2e/*',
            '/dist/out-tsc/',
        ],
        setupFilesAfterEnv: ['./test-setup.ts'],
        transformIgnorePatterns: ['node_modules/(?!@agm)', '/!node_modules\\/lodash-es/'],
    };
}

module.exports = jestConfig;

The latter part is so that it is usuable with the Webstorm test runner process.env.IDE is not set when running through the Nx CLI

And as for the project one (this is one of the apps that I ran tests for after upgrading)

module.exports = {
    name: 'checkin',
    preset: '../../jest.config.js',
    coverageDirectory: '../../coverage/apps/checkin',
    snapshotSerializers: [
        'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
        'jest-preset-angular/build/AngularSnapshotSerializer.js',
        'jest-preset-angular/build/HTMLCommentSerializer.js',
    ],
};

Only thing that changed in either of these files is the path to the serializers and the the testMatch which was '**/+(*.)+(spec|test).+(ts|js)?(x)' before. For some reason it needed to be updated cause no tests were found.

I can try and recreate this is a separate workspace but my guess is a simple project is going to work since it doesn't seem like anyone else has had this issue and the Nx CLI is heavily tested.

[yharaskrik]

Just tried recreating it using a new workspace going from 8 to 9 and upgrading material. Everything seemed to work fine. Not sure what he difference between that one and mine is (other than the amount of code).

I compared the root jest config that was generated with mine and trimmed some fat (remove the serializers from the root in mine as they didn't exist in the new one).

Note: the testMatch regex that is generated in a new workspace does not find any tests in my worksapce (for whatever reason)

new: '**/+(*.)+(spec|test).+(ts|js)?(x)'
mine: '**/+(*.)+(spec|test).[tj]s?(x)'

Not sure how/why that would differ but something is clearly different that is causing that in mine.

[yharaskrik]

Just tried this again after upgrading to Nx 10. The test match that comes from the nxPreset require, does the same thing in my repo. No tests are run (as they are not found).

@Cammisuli if you remember our chat over slack about how our test runs take a really long time, I wonder if our repo is just all messed up for some reason and thats why I am getting all these oddities that don't seem to happen to you guys?