Jest-preset-angular: Using ng5 new locale feature

[marcojahn]

I've tried to setup Angular5s new locale System to have these features within my tests.

What I have done is (setupJest.ts)

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

import 'jest-preset-angular';

registerLocaleData(localeDe);

But got the following errors

 FAIL  src/app/foo/bar.component.spec.ts
  ● Test suite failed to run

    /Users/Projects/.../node_modules/@angular/common/locales/de.js:10
    export default [
    ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (src/setupJest.ts:4:12)
          at Generator.next (<anonymous>)

Any recommendations on how to set it up ?

[thymikee]

Update you Jest config to transform @angular/common code:

{
  "transformIgnorePatterns": [
    "node_modules/(?!@ngrx|@angular/common)"
  ]
}

@ngrx here is just an example of another module which needs transforming (Jest doesn't transform code inside node_modules by default, that's why you need to tell it to do otherwise if some modules, like @angular/common are published as untranspiled TypeScript).
You'll find more information in React Native setup tutorial if you're curious why you need this.

[marcojahn]

Hi,

just tried a few different combinations in my package.json, but none of them is working.

"transformIgnorePatterns": [
      "node_modules/(?!(@angular/common)/)"
    ],

"transformIgnorePatterns": [
      "node_modules/(?!@ngrx|@angular/common)"
    ],

But the error still remains. Found a comment in the JEST issue tracker describing that scoped packages could be a problem.

[thymikee]

It's rather unlikely it has anything to do with scoped packages (you can see it works for @ngrx. Can you just try ignore whole @angular?

{
  "transformIgnorePatterns": [
    "node_modules/(?!@angular)"
  ]
}

[thymikee]

And run jest with --no-cache flag.

[marcojahn]

still the same error, here is my full jest configuration in package.json

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "ts",
      "tsx",
      "tsx",
      "html"
    ],
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "node_modules/(?!@angular)"
    ],
    "coverageReporters": [
      "html",
      "json",
      "lcov",
      "text"
    ],
    "coverageDirectory": "coverage",
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "jestGlobalMocks.ts",
      "setupJest.ts",
      "html",
      "kitchensink",
      "db.json"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 60,
        "functions": 80,
        "lines": 90,
        "statements": 90
      }
    }
  },

[marcojahn]

Got it temporary working transpiling the file /node_modules/@angular/common/locales/de.js by myself and that does not throw this error

[thymikee]

You can also try clearing the cache: https://github.com/facebook/jest/issues/3705#issuecomment-312199902 and see if that helps

[marcojahn]

clearing cache does not help anyway...

Transpiling by myself is atm the only way to get the translation working in the tests...

here is my working example

setupJest.ts

import { registerLocaleData } from '@angular/common';
// import localeDe from '@angular/common/locales/de'

import 'jest-preset-angular';

// transpiled localeDe from above (typescript playground)
registerLocaleData([
  'de',
  [
    ['vm.', 'nm.'],
    ['vorm.', 'nachm.'],
  ],
  [
    ['vorm.', 'nachm.'],
    ,
  ],
  [
    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
  ],
  [
    ['S', 'M', 'D', 'M', 'D', 'F', 'S'], ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.']
  ],
  [
    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
    [
      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
      'November', 'Dezember'
    ]
  ],
  [
    ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
    [
      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober',
      'November', 'Dezember'
    ]
  ],
  [
    ['v. Chr.', 'n. Chr.'],
    ,
  ],
  1, [6, 0], ['dd.MM.yy', 'dd.MM.y', 'd. MMMM y', 'EEEE, d. MMMM y'],
  ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
  [
    '{1}, {0}',
    ,
    '{1} \'um\' {0}',
  ],
  [',', '.', ';', '%', '+', '-', 'E', '·', '‰', '∞', 'NaN', ':'],
  ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'Euro',
  function (n) {
    var i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
    if (i === 1 && v === 0)
      return 1;
    return 5;
  }
]);

localeDEComponent.spec.ts

providers: [
        {provide: LOCALE_ID, useValue: 'de'},
      ]

[Brototype]

I have the same problems - even if I transpile manually as @marcojahn said 2 tests are still failing

UPDATE: I found a solution:

1. install babel-preset-env and create .babelrc with content { "presets": ["env"] }
2. add this to the jest config

"transformIgnorePatterns": [
      "node_modules/(?!@angular/common)"
    ],
"transform": {
      "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
      "^.+\\.js$": "babel-jest"
    },

1. in your setup-jest.ts (or however you call it) add

import { registerLocaleData } from '@angular/common';
import de from '@angular/common/locales/de';

registerLocaleData(de);

[thymikee]

I wonder if we should add this by default – compiling JS files with Babel instead of TS?

[shusson]

@thymikee can we reopen this issue? I just encountered it and none of the suggested solutions work for me.

[shusson]

Actually Brototype's solution with babel works for me

[ahnpnl]

I think his solution is similar to README as well. So I think we don't need to modify README for this situation 😀