ESM support for jest

Description

Angular package format v13 seems like it won’t be shipping libraries as commonjs anymore and will only include esm bundles. Right now if you try and use an esm node_module inside of a jest unit test it doesn’t work. If there is already discussion about this elsewhere, or there is already a plan for how to deal with this, feel free to close this issue 😄

Motivation

It won’t be possible to run unit tests with angular 13 otherwise.

Suggested Implementation

Use the esm support provided by jest and jest-preset-angular.

Alternate Implementations

Use a custom jest transformer to downlevel the esm in node_modules into commonjs. Having to always run nx test with NODE_OPTIONS=--experimental-vm-modules isn’t an ideal solution. Or maybe it’s possible to persuade the angular team to continue shipping a commonjs bundle to npm until the esm story inside of jest is no longer experimental.

[mattlewis92]

I messed about with transpiling node_modules esm -> commonjs today and I think this may work as a decent solution and can easily be auto migrated via nx:

1. npm i -D jest-esm-transformer
2. For each libraries jest.config.js (maybe angular libs only? But more and more packages are starting to ship ESM only so maybe it makes sense for all libs) set these options:

  transform: {
    'node_modules\\/.+\\.js$': 'jest-esm-transformer',
    '^.+\\.(ts|js|html)$': 'jest-preset-angular', // probably tweak this regexp to exclude anything in node_modules
  },
  transformIgnorePatterns: [] // by default jest ignores anything in node_modules: https://jestjs.io/docs/configuration#transformignorepatterns-arraystring

1. update the nx resolver to support the module field according to the guide here (it looks like APF v13 will only provide the module and exports fields, neither of which are supported out the box by jest)

The only downside of this approach is that there will be a slight perf hit to transpiling node_modules, but I think jest’s built in caching should mitigate most of that, my initial tests on our app there didn’t seem to be much of an observable perf change with this change.

[barbados-clemens]

@FacePalmDev that change is already in the nx resolver today

@Nightbr you more than likely just need to set up your transformIgnorePatterns to handle the react-dnd package.