fix: testbed issues caused by module resolution of different angular versions

Author: James Salas

jest/tests-setup.ts

@@ -11,14 +11,14 @@ import 'zone.js/dist/sync-test';
 // tslint:disable-next-line:ordered-imports
 import 'jest-zone-patch';
 
-import { TestBed } from '@angular/core/testing';
+import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-TestBed.initTestEnvironment(
+getTestBed().initTestEnvironment(
   [BrowserDynamicTestingModule, NoopAnimationsModule],
   platformBrowserDynamicTesting(),
 );

package.json

@@ -34,15 +34,15 @@
     ]
   },
   "devDependencies": {
-    "@angular/animations": "6.0.7",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/core": "6.0.7",
-    "@angular/forms": "6.0.7",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
+    "@angular/animations": "7.1.4",
+    "@angular/common": "7.1.4",
+    "@angular/compiler": "7.1.4",
+    "@angular/compiler-cli": "7.1.4",
+    "@angular/core": "7.1.4",
+    "@angular/forms": "7.1.4",
+    "@angular/platform-browser": "7.1.4",
+    "@angular/platform-browser-dynamic": "7.1.4",
+    "@angular/router": "7.1.4",
     "@commitlint/cli": "7.0.0",
     "@commitlint/config-conventional": "7.0.1",
     "@commitlint/prompt-cli": "7.0.0",

packages/example-app/angular.json

@@ -22,8 +22,13 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -84,8 +89,13 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -111,11 +121,16 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
     }
   },
-  "defaultProject": "example-app"
-}
+  "defaultProject": "example-app",
+  "cli": {
+    "packageManager": "yarn"
+  }
+}

packages/example-app/jest.config.js

@@ -1,5 +1,33 @@
+'use strict';
+
+// Jest JUnit Reporter config
+process.env.JEST_JUNIT_OUTPUT = './coverage/junit.xml';
+
 module.exports = {
-  preset: 'jest-preset-angular',
-  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
-  testMatch: ['**/*.spec.ts'],
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
+  transform: {
+    '^.+\\.(ts|js|html)$':
+      '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+  },
+  testMatch: ['**/*.spec.{ts,js}'],
+  moduleFileExtensions: ['ts', 'js', 'html', 'json'],
+  setupTestFrameworkScriptFile: '<rootDir>/src/test.ts',
+  snapshotSerializers: [
+    '<rootDir>/node_modules/jest-preset-angular/AngularSnapshotSerializer.js',
+    '<rootDir>/node_modules/jest-preset-angular/HTMLCommentSerializer.js',
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/src/testing/file.mock.ts',
+  },
+  modulePathIgnorePatterns: ['dist'],
+  reporters: ['default', 'jest-junit'],
+  collectCoverageFrom: [
+    '**/packages/**/*.{ts,js}',
+    '!**/node_modules/**',
+    '!**/dist/**',
+  ],
+  coverageReporters: ['lcov', 'text-summary'],
 };

packages/example-app/package.json

@@ -18,14 +18,15 @@
     "@angular-redux/form": "latest",
     "@angular-redux/router": "latest",
     "@angular-redux/store": "latest",
-    "@angular/common": "^7.1.0",
-    "@angular/compiler": "^7.1.0",
-    "@angular/core": "^7.1.0",
-    "@angular/forms": "^7.1.0",
-    "@angular/http": "^7.1.0",
-    "@angular/platform-browser": "^7.1.0",
-    "@angular/platform-browser-dynamic": "^7.1.0",
-    "@angular/router": "^7.1.0",
+    "@angular/animations": "7.1.4",
+    "@angular/common": "^7.1.4",
+    "@angular/compiler": "^7.1.4",
+    "@angular/core": "^7.1.4",
+    "@angular/forms": "^7.1.4",
+    "@angular/http": "^7.1.4",
+    "@angular/platform-browser": "^7.1.4",
+    "@angular/platform-browser-dynamic": "^7.1.4",
+    "@angular/router": "^7.1.4",
     "core-js": "^2.4.1",
     "flux-standard-action": "^2.0.3",
     "ramda": "^0.26.0",
@@ -45,6 +46,7 @@
     "@types/ramda": "^0.24.18",
     "@types/redux-logger": "^3.0.0",
     "jest": "^23.6.0",
+    "jest-junit": "5.2.0",
     "jest-preset-angular": "6.0.2",
     "protractor": "^5.4.1",
     "ts-node": "^7.0.1",

packages/example-app/src/app/animals/animal-list/component.spec.ts

@@ -4,10 +4,6 @@ import { By } from '@angular/platform-browser';
 import { CoreModule } from '../../core/module';
 import { AnimalType } from '../model';
 import { AnimalListComponent } from './component';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
 
 @Component({ selector: 'zoo-animal', template: '' })
 class MockAnimalComponent {
@@ -17,12 +13,6 @@ class MockAnimalComponent {
 
 describe('AnimalListComponent', () => {
   beforeEach(async(() => {
-    TestBed.resetTestEnvironment();
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting(),
-    );
-
     TestBed.configureTestingModule({
       declarations: [AnimalListComponent, MockAnimalComponent],
       imports: [CoreModule],

packages/example-app/src/app/animals/animal/component.spec.ts

@@ -7,7 +7,6 @@ import { async, TestBed } from '@angular/core/testing';
 import { AnyAction, Reducer } from 'redux';
 import { CoreModule } from '../../core/module';
 import { AnimalComponent } from './component';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 type ConfigureSubStoreFn = (
   basePath: (string | number)[],
@@ -20,12 +19,6 @@ describe('AnimalComponent', () => {
   let spyConfigureSubStore: ConfigureSubStoreFn;
 
   beforeEach(async(() => {
-    TestBed.resetTestEnvironment();
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting(),
-    );
-
     spyConfigureSubStore = spyOn(
       MockNgRedux.mockInstance!,
       'configureSubStore',

packages/example-app/src/app/component.spec.ts

@@ -8,12 +8,6 @@ import {
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
-    TestBed.resetTestEnvironment();
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting(),
-    );
-
     TestBed.configureTestingModule({
       declarations: [AppComponent],
       imports: [RouterTestingModule],

packages/example-app/src/app/elephants/page.spec.ts

@@ -12,7 +12,6 @@ import { toArray } from 'rxjs/operators';
 import { AnimalAPIActions } from '../animals/api/actions';
 import { ANIMAL_TYPES } from '../animals/model';
 import { ElephantPageComponent } from './page';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 @Component({
   selector: 'zoo-animal-list',
@@ -27,12 +26,6 @@ class MockAnimalListComponent {
 
 describe('Elephant Page Container', () => {
   beforeEach(() => {
-    TestBed.resetTestEnvironment();
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting(),
-    );
-
     TestBed.configureTestingModule({
       declarations: [ElephantPageComponent, MockAnimalListComponent],
       imports: [NgReduxTestingModule],

packages/example-app/src/app/feedback/page.spec.ts

@@ -6,16 +6,10 @@ import { TestBed } from '@angular/core/testing';
 
 import { toArray } from 'rxjs/operators';
 import { FeedbackFormComponent } from './page';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
 
 describe('Feedback Form Component', () => {
   beforeEach(() => {
-    TestBed.resetTestEnvironment();
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting(),
-    );
-
     TestBed.configureTestingModule({
       declarations: [FeedbackFormComponent],
       imports: [NgReduxTestingModule],

packages/example-app/src/app/store/module.spec.ts

@@ -6,39 +6,27 @@ import {
 import { async, getTestBed, TestBed } from '@angular/core/testing';
 import { RootEpics } from './epics';
 import { StoreModule } from './module';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 describe('Store Module', () => {
   let mockNgRedux: NgRedux<any>;
   let devTools: DevToolsExtension;
   let mockEpics: Partial<RootEpics>;
 
   beforeEach(async(() => {
-    TestBed.resetTestEnvironment();
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting(),
-    );
-
     TestBed.configureTestingModule({
       imports: [NgReduxTestingModule],
     })
-      .compileComponents()
-      .then(() => {
-        const testbed = getTestBed();
-
-        mockEpics = {
-          createEpics() {
-            return [];
-          },
-        };
-
-        devTools = testbed.get(DevToolsExtension);
-        mockNgRedux = MockNgRedux.getInstance();
-      });
   }));
 
   it('should configure the store when the module is loaded', async(() => {
+    mockEpics = {
+      createEpics() {
+        return [];
+      },
+    };
+    devTools = TestBed.get(DevToolsExtension);
+    mockNgRedux = MockNgRedux.getInstance();
+
     const configureSpy = spyOn(MockNgRedux.getInstance(), 'configureStore');
     const module = new StoreModule(
       mockNgRedux,

packages/example-app/src/setupJest.ts

@@ -0,0 +1,23 @@
+// tslint:disable:no-implicit-dependencies
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'zone.js';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import 'zone.js/dist/proxy';
+import 'zone.js/dist/sync-test';
+// This must be loaded in after ZoneJS
+// tslint:disable-next-line:ordered-imports
+import 'jest-zone-patch';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+getTestBed().initTestEnvironment(
+  [BrowserDynamicTestingModule, NoopAnimationsModule],
+  platformBrowserDynamicTesting(),
+);

packages/example-app/src/test.ts

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';