jsverse/transloco-keys-manager

Bug: Jest test fails with marker

Opened this issue · 9 comments

mirinio commented

Is there an existing issue for this?

  • I have searched the existing issues

Is this a regression?

No

Current behavior

I just moved from ngneat/transloco-keys-manager to jsverse/transloco-keys-manager v4.0.1.
When running my Jest tests, I get following error inside every file where I am using the marker.

image

Expected behavior

I shouldn't get syntax error in my jest test when using marker.

Please provide a link to a minimal reproduction of the bug

https://github.com/mirinio/jest-transloco-issue

Transloco Config

module.exports = {
  rootTranslationsPath: './src/assets/i18n/',
  langs: ['en', 'de', 'it', 'fr'],
  keysManager: {}
};

Debug Logs

No response

Please provide the environment you discovered this bug in

Transloco:   "@jsverse/transloco": "^7.0.0"
Transloco Keys Manager:    "@jsverse/transloco-keys-manager": "^4.0.1"
Angular:    "@angular/core": "~17.3.1"
Node: v18.18.0
Package Manager: pnpm v8.15.4
OS: Windows

Additional context

No response

I would like to make a pull request for this bug

No

JelleBruisten commented

I just ran into this issue too, you happen to know a workaround for time being?

mirinio commented

not yet, I jusst updated my repo example.
I tryied to use the index.js file but that didnt work somehow.
Usually I try to fix it with moduleNameMapper like this
moduleNameMapper: {
'@jsverse/transloco-keys-manager': 'node_modules/@jsverse/transloco-keys-manager/index.js',
},
that works for lodash and flat issues but for key-manager it didn't.

JelleBruisten commented

Yeah I ran into the same it seemed solved, then I ran into flat. and after that it said ... is not a function ( the marker function ).

JelleBruisten commented

Another thing to add that might be related, storybook also fails with the following error message:

Module not found: Error: Package path ./marker is not exported from package ./node_modules/@jsverse/transloco-keys-manager (see exports field in ./node_modules/@jsverse/transloco-keys-manager/package.json)
    at ./node_modules/@storybook/builder-webpack5/dist/index.js:1:8954
    at ./node_modules/webpack/lib/HookWebpackError.js:68:3

We have a UI component with some default text, which is overriden by input. But by default the UI component just uses a default translation ( with marker function etc ).

austinw-fineart commented

Here's a workaround for Jest until this gets fixed. Put it in your test-setup:

jest.mock('@jsverse/transloco-keys-manager/marker', () => ({
  marker: jest.fn(),
}));
  • 👍1
JelleBruisten commented

Here's a workaround for Jest until this gets fixed. Put it in your test-setup:

jest.mock('@jsverse/transloco-keys-manager/marker', () => ({
  marker: jest.fn(),
}));

I ran into another problem with a test somewhere I edited the workaround to:

jest.mock('@jsverse/transloco-keys-manager/marker', () => ({
  marker: jest.fn((x) => x),
}));

So it mimics the implementation

shaharkazaz commented

@JelleBruisten Which version are you using? there was an issue with the marker export.
ESM and jest are an issue, there are discussions (1, 2) on it in the transloco repo where I updated to flat@6.

I need to review all the suggestions and try to document which path mostly resolves the issue, same goes here as this is now an ESM package.

If @JelleBruisten solution resolves the issue I'll add it as a section in the docs.
@mirinio You are running component tests? where did this meet you?

JelleBruisten commented

@shaharkazaz

We are on "@jsverse/transloco-keys-manager": "4.1.0",

  • 👍1
mirinio commented

@shaharkazaz in the example repo attached, I've added a simple jest test for the app component where the marker is used.

  • 👍1