Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using ng5 new locale feature #92

Closed
marcojahn opened this issue Nov 13, 2017 · 13 comments
Closed

Using ng5 new locale feature #92

marcojahn opened this issue Nov 13, 2017 · 13 comments

Comments

@marcojahn
Copy link

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Owner

And run jest with --no-cache flag.

@marcojahn
Copy link
Author

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
Copy link
Author

marcojahn commented Nov 14, 2017

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

@thymikee
Copy link
Owner

You can also try clearing the cache: jestjs/jest#3705 (comment) and see if that helps

@marcojahn
Copy link
Author

marcojahn commented Nov 14, 2017

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
Copy link

Brototype commented Dec 20, 2017

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
Copy link
Owner

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

@shusson
Copy link

shusson commented Mar 9, 2018

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

@shusson
Copy link

shusson commented Mar 9, 2018

Actually Brototype's solution with babel works for me

@ahnpnl
Copy link
Collaborator

ahnpnl commented Mar 9, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants