feat: alternative setup with babel/typescript

Author: wtho

CHANGELOG.md

@@ -5,6 +5,7 @@
 * (**BREAKING**): Restructure project with `src` and `build` folder ([#307](https://github.com/thymikee/jest-preset-angular/pull/307)). 
 * (**BREAKING**): Support `tsconfig.spec.json` in root folder by default ([#309](https://github.com/thymikee/jest-preset-angular/pull/309)). 
 * (**BREAKING**): Remove `core-js` peer dependency and instead add it as direct dependency ([#311](https://github.com/thymikee/jest-preset-angular/pull/309)). 
+* (**BREAKING?**): Add preset `babel` instead of `ts-jest` ([#317](https://github.com/thymikee/jest-preset-angular/pull/317)). 
 
 #### Chore && Maintenance
 * Update example app to match Angular 8 Boilerplate ([#311](https://github.com/thymikee/jest-preset-angular/pull/309)).

babel/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = api => ({
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', {legacy: true}],
+    ['babel-plugin-transform-typescript-metadata', {loose: true}],
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
+    ['jest-preset-angular/babel/inline-template.plugin']
+  ]
+});

babel/inline-template.plugin.js

@@ -0,0 +1,22 @@
+const { types } = require('@babel/core')
+
+module.exports = (_api) => ({
+  visitor: {
+    ObjectProperty(path) {
+      const node = path.node
+      if (!types.isIdentifier(node.key)) return
+      if (node.key.name !== 'templateUrl') return
+      if (!types.isStringLiteral(node.value)) return
+      const requireIdentifier = types.identifier('require')
+      let templateUrl = node.value.value
+      if (!templateUrl.match(/^(\.\/|\.\.\/|\/)/)) {
+        templateUrl = `./${templateUrl}`
+      }
+      const templateUrlStringLiteral = types.stringLiteral(templateUrl)
+      const templateCallExpr = types.callExpression(requireIdentifier, [templateUrlStringLiteral])
+      const templateIdentifier = types.identifier('template')
+      const templateProperty = types.objectProperty(templateIdentifier, templateCallExpr)
+      path.replaceWith(templateProperty)
+    }
+  }
+})

babel/jest-preset.js

@@ -0,0 +1,20 @@
+module.exports = {
+  transform: {
+    '^.+\\.(html)$': 'jest-preset-angular/babel/load-html-transformer',
+    '^.+\\.(ts|js)$': 'babel-jest'
+  },
+  testEnvironment: 'jest-environment-jsdom-thirteen',
+  moduleFileExtensions: ['ts', 'html', 'js', 'json'],
+  moduleNameMapper: {
+    '^src/(.*)$': '<rootDir>/src/$1',
+    '^app/(.*)$': '<rootDir>/src/app/$1',
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^environments/(.*)$': '<rootDir>/src/environments/$1',
+  },
+  transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+};

babel/load-html-transformer.js

@@ -0,0 +1,3 @@
+module.exports = {
+  process: src => ({ code: `module.exports=`+JSON.stringify(src) })
+};

example/babel.config.js

@@ -0,0 +1,6 @@
+const babelAngularConfig = require('jest-preset-angular/babel/babel.config')
+module.exports = api => {
+  api.cache(true)
+  return babelAngularConfig(api)
+}
+

example/package.json

@@ -23,7 +23,15 @@
     "@angular/platform-browser": "~8.2.5",
     "@angular/platform-browser-dynamic": "~8.2.5",
     "@angular/router": "~8.2.5",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-typescript": "^7.6.0",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-transform-typescript-metadata": "^0.2.2",
     "rxjs": "~6.4.0",
+    "ts-jest": "^24.1.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
   },
@@ -41,7 +49,7 @@
     "typescript": "~3.5.3"
   },
   "jest": {
-    "preset": "jest-preset-angular",
+    "preset": "jest-preset-angular/babel",
     "snapshotSerializers": [
       "jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js",
       "jest-preset-angular/build/AngularSnapshotSerializer.js",