feat(testing): update to jest-preset-angular v8.0.0 (#2401)

* feat(testing): update to jest-preset-angular v8.0.0 part 1 Updates to jest-preset-angular to v8.0.0, includes migrations to fix any existing projects affected by the jest-preset-angular update. closes #1979 * feat(testing): update jest-preset-angular to v8.0.0 part 2 Closed issues: #1979, #2165 Co-authored-by: Joshua D. Mentzer <mentzerj@trinity-health.org> * feat(testing): update jest-preset-angular to v8.0.0 part 3 Co-authored-by: mentzerj <mentzerj@trinity-health.org> Co-authored-by: Mehrad Rafigh <4339673+mehrad-rafigh@users.noreply.github.com>
nrwl · Feb 1, 2020 · 972381b · 972381b
1 parent adc2b2a
commit 972381b
Show file tree

Hide file tree

Showing 15 changed files with 536 additions and 301 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,4 @@
-{
-  "singleQuote": true,
-  "endOfLine": "lf"
-}
+{
+  "singleQuote": true,
+  "endOfLine": "lf"
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -80,7 +80,7 @@ While developing you may want to try out the changes you have made. The easier w
 yarn create-playground
 ```
 
-You can then go to `tmp/nx` (this is set up to use Nx CLI) or `tmp/angular` (this is set up to use Angular CLI), where you will find an empty workspace with your changes in it, something this that:
+You can then go to `tmp/nx` (this is set up to use Nx CLI) or `tmp/angular` (this is set up to use Angular CLI), where you will find an empty workspace with your changes in it.:
 
 ```bash
 yarn create-playground

diff --git a/package.json b/package.json
@@ -147,8 +147,8 @@
     "jasmine-spec-reporter": "~4.2.1",
     "jest": "^24.1.0",
     "jest-jasmine2": "^24.1.0",
-    "jest-preset-angular": "7.0.0",
-    "jest-worker": "24.9.0",
+    "jest-preset-angular": "8.0.0",
+    "jest-worker": "^25.1.0",
     "karma": "~4.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",

diff --git a/packages/angular/src/schematics/application/application.spec.ts b/packages/angular/src/schematics/application/application.spec.ts
@@ -91,6 +91,17 @@ describe('app', () => {
       expect(tsconfigE2E.extends).toEqual('./tsconfig.json');
     });
 
+    it('should setup jest with serializers', async () => {
+      const tree = await runSchematic('app', { name: 'myApp' }, appTree);
+
+      expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+        `'jest-preset-angular/build/AngularSnapshotSerializer.js'`
+      );
+      expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+        `'jest-preset-angular/build/HTMLCommentSerializer.js'`
+      );
+    });
+
     it('should default the prefix to npmScope', async () => {
       const noPrefix = await runSchematic(
         'app',
@@ -350,53 +361,71 @@ describe('app', () => {
     });
   });
 
-  describe('--unit-test-runner karma', () => {
-    it('should generate a karma config', async () => {
-      const tree = await runSchematic(
-        'app',
-        { name: 'myApp', unitTestRunner: 'karma' },
-        appTree
-      );
+  describe('--unit-test-runner', () => {
+    describe('default (jest)', () => {
+      it('should generate jest.config.js with serializers', async () => {
+        const tree = await runSchematic('app', { name: 'myApp' }, appTree);
 
-      expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeTruthy();
-      expect(tree.exists('apps/my-app/karma.conf.js')).toBeTruthy();
-      const workspaceJson = readJsonInTree(tree, 'workspace.json');
-      expect(workspaceJson.projects['my-app'].architect.test.builder).toEqual(
-        '@angular-devkit/build-angular:karma'
-      );
-      expect(
-        workspaceJson.projects['my-app'].architect.lint.options.tsConfig
-      ).toEqual([
-        'apps/my-app/tsconfig.app.json',
-        'apps/my-app/tsconfig.spec.json'
-      ]);
-      const tsconfigAppJson = readJsonInTree(
-        tree,
-        'apps/my-app/tsconfig.app.json'
-      );
-      expect(tsconfigAppJson.compilerOptions.outDir).toEqual(
-        '../../dist/out-tsc'
-      );
+        expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+          `'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js'`
+        );
+        expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+          `'jest-preset-angular/build/AngularSnapshotSerializer.js'`
+        );
+        expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+          `'jest-preset-angular/build/HTMLCommentSerializer.js'`
+        );
+      });
     });
-  });
 
-  describe('--unit-test-runner none', () => {
-    it('should not generate test configuration', async () => {
-      const tree = await runSchematic(
-        'app',
-        { name: 'myApp', unitTestRunner: 'none' },
-        appTree
-      );
-      expect(tree.exists('apps/my-app/src/test-setup.ts')).toBeFalsy();
-      expect(tree.exists('apps/my-app/src/test.ts')).toBeFalsy();
-      expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy();
-      expect(tree.exists('apps/my-app/jest.config.js')).toBeFalsy();
-      expect(tree.exists('apps/my-app/karma.config.js')).toBeFalsy();
-      const workspaceJson = readJsonInTree(tree, 'workspace.json');
-      expect(workspaceJson.projects['my-app'].architect.test).toBeUndefined();
-      expect(
-        workspaceJson.projects['my-app'].architect.lint.options.tsConfig
-      ).toEqual(['apps/my-app/tsconfig.app.json']);
+    describe('karma', () => {
+      it('should generate a karma config', async () => {
+        const tree = await runSchematic(
+          'app',
+          { name: 'myApp', unitTestRunner: 'karma' },
+          appTree
+        );
+
+        expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeTruthy();
+        expect(tree.exists('apps/my-app/karma.conf.js')).toBeTruthy();
+        const workspaceJson = readJsonInTree(tree, 'workspace.json');
+        expect(workspaceJson.projects['my-app'].architect.test.builder).toEqual(
+          '@angular-devkit/build-angular:karma'
+        );
+        expect(
+          workspaceJson.projects['my-app'].architect.lint.options.tsConfig
+        ).toEqual([
+          'apps/my-app/tsconfig.app.json',
+          'apps/my-app/tsconfig.spec.json'
+        ]);
+        const tsconfigAppJson = readJsonInTree(
+          tree,
+          'apps/my-app/tsconfig.app.json'
+        );
+        expect(tsconfigAppJson.compilerOptions.outDir).toEqual(
+          '../../dist/out-tsc'
+        );
+      });
+    });
+
+    describe('none', () => {
+      it('should not generate test configuration', async () => {
+        const tree = await runSchematic(
+          'app',
+          { name: 'myApp', unitTestRunner: 'none' },
+          appTree
+        );
+        expect(tree.exists('apps/my-app/src/test-setup.ts')).toBeFalsy();
+        expect(tree.exists('apps/my-app/src/test.ts')).toBeFalsy();
+        expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy();
+        expect(tree.exists('apps/my-app/jest.config.js')).toBeFalsy();
+        expect(tree.exists('apps/my-app/karma.config.js')).toBeFalsy();
+        const workspaceJson = readJsonInTree(tree, 'workspace.json');
+        expect(workspaceJson.projects['my-app'].architect.test).toBeUndefined();
+        expect(
+          workspaceJson.projects['my-app'].architect.lint.options.tsConfig
+        ).toEqual(['apps/my-app/tsconfig.app.json']);
+      });
     });
   });
 

diff --git a/packages/angular/src/utils/versions.ts b/packages/angular/src/utils/versions.ts
@@ -4,4 +4,4 @@ export const angularDevkitVersion = '0.900.0-rc.12';
 export const angularJsVersion = '1.6.6';
 export const ngrxVersion = '8.5.0';
 export const rxjsVersion = '~6.5.0';
-export const jestPresetAngularVersion = '7.0.0';
+export const jestPresetAngularVersion = '8.0.0';
diff --git a/packages/jest/migrations.json b/packages/jest/migrations.json
@@ -9,6 +9,22 @@
       "version": "8.7.0",
       "description": "Update Jest testPathPattern option",
       "factory": "./src/migrations/update-8-7-0/update-8-7-0"
+    },
+    "update-9.0.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"
+    }
+  },
+  "packageJsonUpdates": {
+    "9.0.0": {
+      "version": "9.0.0-beta.1",
+      "packages": {
+        "jest-preset-angular": {
+          "version": "8.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }
diff --git a/packages/jest/src/builders/jest/jest.impl.spec.ts b/packages/jest/src/builders/jest/jest.impl.spec.ts
@@ -57,7 +57,8 @@ describe('Jest Builder', () => {
               tsConfig: '/root/tsconfig.test.json',
               stringifyContentPathRegex: '\\.(html|svg)$',
               astTransformers: [
-                'jest-preset-angular/InlineHtmlStripStylesTransformer'
+                'jest-preset-angular/build/InlineFilesTransformer',
+                'jest-preset-angular/build/StripStylesTransformer'
               ]
             }
           }),
@@ -99,7 +100,8 @@ describe('Jest Builder', () => {
               tsConfig: '/root/tsconfig.test.json',
               stringifyContentPathRegex: '\\.(html|svg)$',
               astTransformers: [
-                'jest-preset-angular/InlineHtmlStripStylesTransformer'
+                'jest-preset-angular/build/InlineFilesTransformer',
+                'jest-preset-angular/build/StripStylesTransformer'
               ]
             }
           }),
@@ -142,7 +144,8 @@ describe('Jest Builder', () => {
               tsConfig: '/root/tsconfig.test.json',
               stringifyContentPathRegex: '\\.(html|svg)$',
               astTransformers: [
-                'jest-preset-angular/InlineHtmlStripStylesTransformer'
+                'jest-preset-angular/build/InlineFilesTransformer',
+                'jest-preset-angular/build/StripStylesTransformer'
               ]
             }
           }),
@@ -199,7 +202,8 @@ describe('Jest Builder', () => {
               tsConfig: '/root/tsconfig.test.json',
               stringifyContentPathRegex: '\\.(html|svg)$',
               astTransformers: [
-                'jest-preset-angular/InlineHtmlStripStylesTransformer'
+                'jest-preset-angular/build/InlineFilesTransformer',
+                'jest-preset-angular/build/StripStylesTransformer'
               ]
             }
           }),
@@ -251,7 +255,8 @@ describe('Jest Builder', () => {
               tsConfig: '/root/tsconfig.test.json',
               stringifyContentPathRegex: '\\.(html|svg)$',
               astTransformers: [
-                'jest-preset-angular/InlineHtmlStripStylesTransformer'
+                'jest-preset-angular/build/InlineFilesTransformer',
+                'jest-preset-angular/build/StripStylesTransformer'
               ]
             }
           }),
@@ -307,7 +312,8 @@ describe('Jest Builder', () => {
               tsConfig: '/root/tsconfig.test.json',
               stringifyContentPathRegex: '\\.(html|svg)$',
               astTransformers: [
-                'jest-preset-angular/InlineHtmlStripStylesTransformer'
+                'jest-preset-angular/build/InlineFilesTransformer',
+                'jest-preset-angular/build/StripStylesTransformer'
               ]
             }
           }),

diff --git a/packages/jest/src/builders/jest/jest.impl.ts b/packages/jest/src/builders/jest/jest.impl.ts
@@ -72,7 +72,10 @@ function run(
     require.resolve('jest-preset-angular');
     Object.assign(tsJestConfig, {
       stringifyContentPathRegex: '\\.(html|svg)$',
-      astTransformers: ['jest-preset-angular/InlineHtmlStripStylesTransformer']
+      astTransformers: [
+        'jest-preset-angular/build/InlineFilesTransformer',
+        'jest-preset-angular/build/StripStylesTransformer'
+      ]
     });
   } catch (e) {}