transloco: bug(transloco): error when running tests after updating to v5.0.9

NX uses flat version 5.0.2, @ngneat/transloco uses version 6.0. Forcing nx to use flat version 6.x is not a success, but the other way around works, force transloco to use version 5.0.2, you can do this by adding in package.json:

  "overrides": {
    "@ngneat/transloco": {
      "flat": "5.0.2"
    }
  }

Before:

npm ls flat
web-gz-angular-apps@1.3.0 /Users/elmarbeckmann/Code/alliander/web-gz-angular-apps
├─┬ @ngneat/transloco@6.0.0
│ └── flat@6.0.0
└─┬ nx@16.10.0
  └── flat@5.0.2

after:

npm ls flat
web-gz-angular-apps@1.3.0 /Users/elmarbeckmann/Code/alliander/web-gz-angular-apps
├─┬ @ngneat/transloco@6.0.0 overridden
│ └── flat@5.0.2 overridden
└─┬ nx@16.10.0
  └── flat@5.0.2

Just leaving this here in case it helps anyone: For me, a better fix was not to use moduleNameMapper since that’s just a workaround which relies on adding an additional dependency to the older non-ESM version of flat.

Instead, we can use the transformIgnorePatterns option to make sure that Jest will convert the ESM flat package to CommonJS. This way we don’t need any additional dependencies. In my case, this is what it looks like:

// we need to let Jest know which files are ESM so they can be transformed to CommonJS
const esModules = [
  '.*\\.mjs$', // .mjs files are always ESM so they need to be transformed always
  'flat/', // npm package "flat" is ESM-only from version 6
].join('|');

...
// in jest config:
transformIgnorePatterns: [`node_modules/(?!\\.pnpm|${esModules})`],

NOTE 1: we are using pnpm in our repo. If you don’t use pnpm then you can remove \\.pnpm| from the pattern.

NOTE 2: even better (ideal) scenario would be to go full 100% ESM. Then we would not have to transform esm modules to commonjs anymore. However, achieving this on a large existing repo is not trivial. If you are interested to try it, I recommend reading this article: https://angularexperts.io/blog/total-guide-to-jest-esm-and-angular

I’ve released this as a major version and deprecated v5.0.8-10 Don’t reopen this issue as it should be handled by your jest config.

@jontze @dzhavat When you make the upgrade you are welcome to add a recipe on how you did it (in an nx or ng project) and open a PR 🙂

@dzhavat My guess is that it’s related to the flat upgrade, it’s now ESM. Try to enable jest’s ESM support and see if that resolves your issue.

For me the only working solutions was the one mentioned by @elmarbeckmann

Using jest in ESM mode is experimental, and had too many other side effects for my project. I tried overriding flat in package.json, as suggested by @elmarbeckmann, but somehow it didn’t work. So I did a mix with the mock solution from @FabienDehopre.

Installed flat 5.02 under an alias, just for jest: npm i flat-cjs-for-jest@npm:flat@5.0.2 Then I configured jest to use that flat package. In jest.config.js:

  moduleNameMapper: {
    flat: '<rootDir>/node_modules/flat-cjs-for-jest/index.js',
  },

I had the same issue in my tests but finally succeeded in solving the issue. Here is how I did workaround it:

• create a “mocks” folder in the root of my Nx workspace.
• create a “flat” folder in the “mocks” folder.
• create an empty index.ts file in the “mocks/flat” folder.
• updated my project’s jest.config.ts file an entry to the moduleNameMapper property: flat: '<rootDir>/../../../mocks/flat/index.ts' (of course, the number of “…” depends on the depth of your jest.config.ts file)

I hope this solution will help people which have the same issue.

I do have the same issue with the current version “6.0.0”. Downgrading to 5.0.7 fixed the issue without any further changes.

Easier solution: https://github.com/ngneat/transloco/issues/714#issuecomment-1896184902

@elmarbeckmann I mean opening a PR to Transloco and add the workaround to the unit tests section/FAQ

sure, will do!

Thanks @Piiiiiiiiiiiim for your solution but, in our case, it makes the tests horribly slow (more than 90 secs and still no test ran). So, I’ll stick to my solution for now

Thanks @FabienDehopre for your tip but for us not work.

There is a plan to fix this issue?

@shaharkazaz The upgrade of the related package you speak, is now only in version 6.0.0, correct? Because this issue also occurs in version ^5.0.7, on a completely fresh nx workspace (npx create-nx-workspace@latest). EDIT: Never mind, that package was transparently upgraded to the deprecated 5.0.9 version.

In case anyone else has this issue, I think flatten: {aot: true} in the transloco module testing factory, is a workaround.

Thanks for the fast reaction and clarification 😃

Hi, I run into this exact same issue.

1. The bug appear exactly in 5.0.8 :
   • 5.0.7 => unit tests run OK
   • 5.0.8 => unit tests run KO
2. I didn’t figure out how to enable Jest’s ESM. I use Nx and it handle this kind of configuration for me. Here is the relevant configuration :

jest.config.ts

export default {
  preset: '../../../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {},
  transform: {
    '^.+\\.(ts|mjs|js|html)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
        isolatedModules: true,
      },
    ],
  },
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
  collectCoverageFrom: [
    '<rootDir>/src/**/*.ts',
    '!**/*.stories.ts',
    '!**/index.ts',
  ],
};

jest.preset.js

const nxPreset = require('@nx/jest/preset').default;

module.exports = {
  ...nxPreset
};

I hope it could help.