Tighten up module mappers; bump jest (#53)

In #6 we introduced very loose moduleNameMapper which resulted in couple of weird bugs and until next Jest release it's impossible to override it.

This PR reverts it and adds some reasonable defaults.

Also, because of this "(.*)"mapping, while debugging #41 on master version of Jest, I encountered an issue where one of the internal Jest modules was calling path matching the regexp, but couldn't find it under src dir. This surfaced only because Jest version on master supports checking if modules in moduleNameMapper exist and throws otherwise.

README.md

@@ -2,7 +2,7 @@
 [![CircleCI Build Status](https://circleci.com/gh/thymikee/jest-preset-angular.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/thymikee/jest-preset-angular)
 [![NPM version](https://img.shields.io/npm/v/jest-preset-angular.svg)](https://www.npmjs.com/package/jest-preset-angular)
 
-A preset of [Jest](http://facebook.github.io/jest) configuration for [Angular](https://angular.io/) projects. 
+A preset of [Jest](http://facebook.github.io/jest) configuration for [Angular](https://angular.io/) projects.
 
 This is a part of the article: [Testing Angular faster with Jest](https://www.xfive.co/blog/testing-angular-faster-jest/).
 
@@ -44,7 +44,9 @@ import './jestGlobalMocks'; // browser mocks globally available for every test
     "html"
   ],
   "moduleNameMapper": {
-    "(.*)": "<rootDir>/src/$1"
+    "app/(.*)": "<rootDir>/src/app/$1",
+    "assets/(.*)": "<rootDir>/src/assets/$1",
+    "environments/(.*)": "<rootDir>/src/environments/$1"
   },
   "transformIgnorePatterns": [
     "node_modules/(?!@ngrx)"
@@ -105,31 +107,29 @@ exports[`CalcComponent should snap 1`] = `
 `;
 ```
 
-
-
 ## Troubleshooting
 
 Problems may arise if you're using custom builds (this preset is tailored for `angular-cli` as firsty priority). Please be adivsed that every entry in default configuration may be overriden to best suite your app's needs.
 
 ### Absolute imports
 
-TypeScript supports absolute imports. The preset by default understands all absolute imports referring to `src` directory, so instead:
+TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to `src`, `app`, `assets` and `environments` directory, so instead:
 ```js
 import MyComponent from '../../src/app/my.component';
 import MyStuff from '../../src/testing/my.stuff';
 ```
 you can use:
 ```js
 import MyComponent from 'app/my.component';
-import MyStuff from 'testing/my.stuff';
+import MyStuff from 'src/testing/my.stuff';
 ```
 However, if your directory structure differ from that provided by `angular-cli` you can adjust `moduleNameMapper` in Jest config:
 ```js
 {
   "jest": {
     "moduleNameMapper": {
-       "(.*)": "$1", // override default if it causes problems
-       "testing/(.*)": "<rootDir>/app/testing/$1"
+      "app/(.*)": "<rootDir>/src/to/app/$1", // override default, why not
+      "testing/(.*)": "<rootDir>/app/testing/$1" // add new mapping
     }
   }
 }

example/__mocks__/image.js

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

example/package.json

@@ -36,7 +36,7 @@
     "codelyzer": "~2.0.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
-    "jest": "^20.0.0",
+    "jest": "^21.0.1",
     "jest-preset-angular": "^2.0.1",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
@@ -51,6 +51,9 @@
   },
   "jest": {
     "preset": "jest-preset-angular",
-    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png)$": "<rootDir>/__mocks__/image.js"
+    }
   }
 }

example/src/app/__snapshots__/app.component.spec.ts.snap

@@ -7,15 +7,25 @@ exports[`AppComponent snaps 1`] = `
   variableWithPrecedingDolar={[Function Number]}
 >
   <h1>
+    
     app works!
+    
     <app-calc />
+    
+    
     <span>
       aaa $1234
     </span>
+    
+    
+    
     <span>
       ddd
     </span>
+    
     \`test'chars""
+  
   </h1>
+  
 </app-root>
 `;

example/src/app/calc/__snapshots__/calc.component.spec.ts.snap

@@ -3,14 +3,22 @@
 exports[`CalcComponent should snap 1`] = `
 <app-calc
   hasAClass="false"
+  image={[Function String]}
   prop1={[Function Number]}
 >
-  <p
+  
+      <p
     class="a-default-class"
     ng-reflect-klass="a-default-class"
     ng-reflect-ng-class="[object Object]"
   >
-    calc works! 1337 another text node
+    
+        calc works!
+        1337
+        another text node
+        test-image-stub
+      
   </p>
+    
 </app-calc>
 `;

example/src/app/calc/calc.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+const image = require('assets/its_something.png');
 
 @Component({
   selector: 'app-calc',
@@ -13,18 +14,21 @@ import { Observable } from 'rxjs/Observable';
       calc works!
       {{prop1}}
       another text node
+      {{image}}
     </p>
   `,
   styleUrls: ['./calc.component.css']
 })
 export class CalcComponent implements OnInit {
   @Input() hasAClass = false;
   prop1: number;
+  image: string;
   observable$: Observable<string>;
 
   constructor() {
     this.init();
     this.prop1 = 1337;
+    this.image = image;
   }
 
   ngOnInit() {

example/src/app/simple/__snapshots__/simple.component.spec.ts.snap

@@ -3,7 +3,10 @@
 exports[`SimpleComponent snapshots 1`] = `
 <app-simple>
   <p>
+    
     simple works!
+  
   </p>
+  
 </app-simple>
 `;