feat(jest): update to jest-preset-angular@9 (#913)

MIGRATION.MD

@@ -1,7 +1,14 @@
 # Migration from version 11 to version 12
 
+## Custom webpack builder
+
 No breaking changes (except for updating to Angular 12)
 
+## Jest builder (since 12.1.0)
+1. Jest 27 is required now 
+2. `jest-preset-angular` has been updated to version 9, which uses Angular compiler instead of `ts-jest` in order to transform the TS files. Make sure you understand the implications and perform all the necessary changes to your code base as described in `jest-preset-angular` [CHANGELOG](https://github.com/thymikee/jest-preset-angular/blob/master/CHANGELOG.md).
+
+
 # Migration from version 10 to version 11
 
 ## Custom webpack builder

README.md

@@ -10,11 +10,11 @@ Builders' and Angular **major** versions **must** match.
 
 ## Previous versions
 
- - [Version 11](https://github.com/just-jeb/angular-builders/tree/11.x.x)
- - [Version 10](https://github.com/just-jeb/angular-builders/tree/10.x.x)
- - [Version 9](https://github.com/just-jeb/angular-builders/tree/9.x.x)
- - [Version 8](https://github.com/just-jeb/angular-builders/tree/8.x.x)
- - [Version 7](https://github.com/just-jeb/angular-builders/tree/7.x.x)
+- [Version 11](https://github.com/just-jeb/angular-builders/tree/11.x.x)
+- [Version 10](https://github.com/just-jeb/angular-builders/tree/10.x.x)
+- [Version 9](https://github.com/just-jeb/angular-builders/tree/9.x.x)
+- [Version 8](https://github.com/just-jeb/angular-builders/tree/8.x.x)
+- [Version 7](https://github.com/just-jeb/angular-builders/tree/7.x.x)
 
 # Builders
 

package.json

@@ -38,14 +38,14 @@
     "@types/webpack-merge": "^5.0.0",
     "cpy-cli": "^3.0.0",
     "husky": "^6.0.0",
-    "jest": "^26.2.1",
+    "jest": "^27.0.0",
     "lerna": "^4.0.0",
     "lint-staged": "^11.0.0",
     "lodash": "^4.17.11",
     "prettier": "^2.0.0",
     "quicktype": "^15.0.174",
     "rimraf": "^3.0.0",
-    "ts-jest": "^26.1.1",
+    "ts-jest": "^27.0.0",
     "ts-node": "~10.0.0",
     "typescript": "4.3"
   },

packages/custom-webpack/src/generic-browser-builder.ts

@@ -25,20 +25,19 @@ export type BuilderExecutor<O extends BrowserTargetOptions & json.JsonObject> =
   }
 ) => any;
 
-export const executeBrowserBasedBuilder = <O extends BrowserTargetOptions & json.JsonObject>(
-  executebBuilder: BuilderExecutor<O>
-): BuilderHandlerFn<O> => (
-  options: O,
-  context: BuilderContext
-): ReturnType<typeof executebBuilder> => {
-  async function setup() {
-    const browserTarget = targetFromTargetString(options.browserTarget);
-    return (context.getTargetOptions(browserTarget) as unknown) as CustomWebpackSchema;
-  }
+export const executeBrowserBasedBuilder =
+  <O extends BrowserTargetOptions & json.JsonObject>(
+    executebBuilder: BuilderExecutor<O>
+  ): BuilderHandlerFn<O> =>
+  (options: O, context: BuilderContext): ReturnType<typeof executebBuilder> => {
+    async function setup() {
+      const browserTarget = targetFromTargetString(options.browserTarget);
+      return context.getTargetOptions(browserTarget) as unknown as CustomWebpackSchema;
+    }
 
-  return from(setup()).pipe(
-    switchMap(customWebpackOptions =>
-      executebBuilder(options, context, getTransforms(customWebpackOptions, context))
-    )
-  );
-};
+    return from(setup()).pipe(
+      switchMap(customWebpackOptions =>
+        executebBuilder(options, context, getTransforms(customWebpackOptions, context))
+      )
+    );
+  };

packages/custom-webpack/src/transform-factories.ts

@@ -10,18 +10,17 @@ import { tsNodeRegister } from './utils';
 export const customWebpackConfigTransformFactory: (
   options: CustomWebpackSchema,
   context: BuilderContext
-) => ExecutionTransformer<Configuration> = (
-  options,
-  { workspaceRoot, target }
-) => browserWebpackConfig => {
-  return CustomWebpackBuilder.buildWebpackConfig(
-    normalize(workspaceRoot),
-    options.customWebpackConfig,
-    browserWebpackConfig,
-    options,
-    target
-  );
-};
+) => ExecutionTransformer<Configuration> =
+  (options, { workspaceRoot, target }) =>
+  browserWebpackConfig => {
+    return CustomWebpackBuilder.buildWebpackConfig(
+      normalize(workspaceRoot),
+      options.customWebpackConfig,
+      browserWebpackConfig,
+      options,
+      target
+    );
+  };
 
 export const indexHtmlTransformFactory: (
   options: CustomWebpackSchema,

packages/jest/README.md

@@ -27,7 +27,7 @@ The builder comes to provide zero configuration setup for Jest while keeping the
    npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
    rm ./karma.conf.js ./src/test.ts
    ```
-2. Install the builder (and `jest` if you still haven't): 
+2. Install the builder (and `jest` if you still haven't):
    ```console
    npm i -D jest @types/jest @angular-builders/jest
    ```
@@ -65,10 +65,6 @@ The builder comes to provide zero configuration setup for Jest while keeping the
   ```
 - Run the tests: `ng test`
 
-## Ivy compatibility
-
-Ivy compiler is enabled by default in version 9 so if you use it, make sure you run `ngcc` in a `postinstall` hook. For more details refer to [this](https://github.com/just-jeb/angular-builders/issues/679#issuecomment-587525674) issue.
-
 ## Multi-projects workspace support
 
 The builder supports multi-project workspaces out of the box, the only thing required is editing _tsconfig.spec.json_ in the relevant project directory as described [above](#updating-typescript-configurations).
@@ -91,12 +87,12 @@ The builder supports multi-project workspaces out of the box, the only thing req
   Thus, if you don't provide `configPath` in options, and you'd like to customize the configuration of a single project in your workspace, you only have to add _jest.config.js_ in this project's root directory and specify the configuration delta in this file.  
   Or, if you'd like the same custom configuration to be applied to all the projects in the workspace, you just specify it in _package.json_. Another option in such a case is creating a single config file in the workspace root and specifying it in _angular.json_ for each project.
 
-- `tsConfig` - path to tsconfig file. If the path is relative then it is evaluated relative to the _project root_. Defaults to `tsconfig.spec.json` that is located in _project root_.  
-- `globalMocks` - there are 4 global mocks (that lack implementation in JSDom) enabled by default: 
+- `tsConfig` - path to tsconfig file. If the path is relative then it is evaluated relative to the _project root_. Defaults to `tsconfig.spec.json` that is located in _project root_.
+- `globalMocks` - there are 4 global mocks (that lack implementation in JSDom) enabled by default:
   `["getComputedStyle", "doctype", "styleTransform", "matchMedia"]`.  
   Their implementation can be found [here](./src/global-mocks).  
   If you want to disable one or more of these mocks just pass an updated array in options.  
-  For example:  
+  For example:
   ```json
   "options": {
     "globalMocks": ["getComputedStyle", "doctype"]

packages/jest/examples/multiple-apps/package.json

@@ -35,7 +35,7 @@
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "jest": "^26.1.0",
+    "jest": "^27.0.0",
     "ng-packagr": "^12.0.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.2.0",

packages/jest/examples/simple-app/package.json

@@ -35,7 +35,7 @@
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "jest": "^26.1.0",
+    "jest": "^27.0.0",
     "jest-junit": "^6.4.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.2.0",

packages/jest/package.json

@@ -41,13 +41,13 @@
   "dependencies": {
     "@angular-devkit/architect": ">=0.1200.0 < 0.1300.0",
     "@angular-devkit/core": "^12.0.0",
-    "jest-preset-angular": "^8.4.0",
+    "jest-preset-angular": "^9.0.1",
     "lodash": "^4.17.15"
   },
   "peerDependencies": {
-    "jest": ">=26"
+    "jest": ">=27"
   },
   "devDependencies": {
-    "jest": "^26.1.0"
+    "jest": "^27.0.0"
   }
 }