chore: Add Jest as a ng-schematics option (#9257)

**What kind of change does this PR introduce?**

Adds Jest in `ng-schematics`. So you can scaffold test with Jest instead
of Jasmine

**Did you add tests for your changes?**

Yes

**If relevant, did you update the documentation?**

No

**Summary**

Users can more easily integrate test with Puppeteer and their library of
choose.

**Does this PR introduce a breaking change?**

No

**Other information**

packages/ng-schematics/.eslintignore

@@ -0,0 +1,2 @@
+# Ignore File that will be copied to Angular
+/files/

packages/ng-schematics/package.json

@@ -5,11 +5,11 @@
   "scripts": {
     "copy": "node copySchemaFiles.js",
     "clean": "tsc -b --clean && rimraf lib",
-    "dev": "npm run copy && tsc -p tsconfig.json --watch",
+    "dev": "run-s clean copy && tsc -p tsconfig.json --watch",
     "build": "run-s build:*",
     "build:schematics": "npm run copy && tsc -p tsconfig.json",
     "build:test": "tsc -p tsconfig.spec.json",
-    "test": "run-s build && mocha"
+    "test": "run-s clean build && mocha"
   },
   "keywords": [
     "angular",
@@ -29,6 +29,10 @@
     "@types/node": "^14.15.0",
     "@schematics/angular": "^14.2.8"
   },
+  "files": [
+    "lib",
+    "!*.tsbuildinfo"
+  ],
   "ng-add": {
     "save": "devDependencies"
   },

packages/ng-schematics/src/schematics/ng-add/files/base/e2e/tests/app.e2e.ts.template

@@ -17,12 +17,18 @@ describe('App test', function () {
     await page.close();
   });
 
+  <% if(testingFramework == 'jest') { %>
+  afterAll(async () => {
+    await browser.close();
+  });
+  <% } %>
+
   it('is running', async function () {
     const element = await page.waitForSelector(
       'text/<%= project %> app is running!'
     );
 
-    <% if(testingFramework == 'jasmine') { %>
+    <% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
     expect(element).not.toBeNull();
     <% } %>
   });

packages/ng-schematics/src/schematics/ng-add/files/base/e2e/tsconfig.json.template

@@ -2,6 +2,9 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    <% if(testingFramework == 'jest') { %>
+    "esModuleInterop": true,
+    <% } %>
     "types": ["<%= testingFramework %>"]
   },
   "include": ["tests/**/*.e2e.ts"]

packages/ng-schematics/src/schematics/ng-add/files/jest/e2e/jest.config.js

@@ -0,0 +1,11 @@
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  testMatch: ['<rootDir>/tests/**/?(*.)+(e2e).[tj]s?(x)'],
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

packages/ng-schematics/src/schematics/ng-add/schema.json

@@ -13,7 +13,7 @@
     "testingFramework": {
       "description": "",
       "type": "string",
-      "enum": ["jasmine"],
+      "enum": ["jasmine", "jest"],
       "default": "jasmine",
       "x-prompt": {
         "message": "With what Testing Library do you wish to integrate?",
@@ -22,6 +22,10 @@
           {
             "value": "jasmine",
             "label": "Use Jasmine [https://jasmine.github.io/]"
+          },
+          {
+            "value": "jest",
+            "label": "Use Jest [https://jestjs.io/]"
           }
         ]
       }

packages/ng-schematics/src/schematics/utils/files.ts

@@ -125,6 +125,8 @@ export function getScriptFromOptions(options: SchematicsOptions): string {
   switch (options.testingFramework) {
     case TestingFramework.Jasmine:
       return 'jasmine --config=./e2e/support/jasmine.json';
+    case TestingFramework.Jest:
+      return 'jest -c e2e/jest.config.js';
     default:
       throw new SchematicsException('Testing framework not supported.');
   }

packages/ng-schematics/src/schematics/utils/packages.ts

@@ -118,6 +118,9 @@ export function getDependenciesFromOptions(
         '@babel/preset-typescript'
       );
       break;
+    case TestingFramework.Jest:
+      dependencies.push('jest', '@types/jest', 'ts-jest');
+      break;
     default:
       throw new SchematicsException(`Testing framework not supported.`);
   }

packages/ng-schematics/test/src/index.spec.ts

@@ -124,4 +124,17 @@ describe('@puppeteer/ng-schematics: ng-add', () => {
     expect(devDependencies).toContain('@babel/register');
     expect(devDependencies).toContain('@babel/register');
   });
+
+  it('should create Jest files and update "package.json"', async () => {
+    const tree = await buildTestingTree({
+      testingFramework: 'jest',
+    });
+    const {scripts, devDependencies} = getPackageJson(tree);
+
+    expect(tree.files).toContain(getProjectFile('e2e/jest.config.js'));
+    expect(scripts['e2e']).toBe('jest -c e2e/jest.config.js');
+    expect(devDependencies).toContain('jest');
+    expect(devDependencies).toContain('@types/jest');
+    expect(devDependencies).toContain('ts-jest');
+  });
 });