transformIgnorePatterns does not work with Ionic 6 and Jest

[seanaguinaga]

Repro:

npm install

nx test ionic

https://github.com/seanaguinaga/nx-jest-ionic-repro

Any ideas?

[barbados-clemens]

I don't really know what's going on here.

I got it to work by using ts-jest and removing the @nrwl/react/plugins/jest transformer. but that's because it transforms everything under the sun and really slows down the tests. not ideal.

I'm not sure if I'm just completely missing something (probably am) but I can still see the files being transformed that should be ignored.

my only guess is something about the ignore pattern is wrong, but it matches all the other ones, or something about the react plugin is causing issues that I'm not seeing.

"working" configuration

module.exports = {
  displayName: 'ionic',
  preset: '../../jest.preset.js',
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
    }
  },
  transform: {
    // '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest', // this seems to be angry when having it. no idea why
    '^.+\\.[tj]sx?$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: '../../coverage/apps/ionic',
  // From https://ionicframework.com/docs/intro/upgrading-to-ionic-6#testing
  transformIgnorePatterns: [
    '/node_modules/(?!@ionic/core|@stencil/core|ionicons)',
  ],
};

[barbados-clemens]

reading more on the ionic 6 testing page. there is this line

If you are still running into issues, here are a couple things to try:

    Verify that @babel/preset-env is included in your [project-wide configuration](https://babeljs.io/docs/en/config-files#project-wide-configuration) instead of your [file-relative configuration](https://babeljs.io/docs/en/config-files#file-relative-configuration). This typically means defining the Babel configuration in <project-root>/babel.config.json.

when moving the nrwl/react/babel preset to the root config and removing the nrwl/react jest plugin it works.
though I don't fully understand why. because that preset should still be applied for the and I can see it getting invoked when in the babelrc, and again when in the root babel.config.json file.

hopefully that's enough info to get you at least unblocked @seanaguinaga I'm going to keep digging to see what is happening here.

[barbados-clemens]

So I talked with some coworkers and it looks like babel isn't transforming the code within the node_modules directory because there only babel config it finds is the babel.config.json which doesn't contain any presets about how to transform the code. so the transform just spits out the same (ESM) code that was provided to it.

I assume this is why the ionic docs said to update the project-wide configuration vs the file relative project.

forcing babel-jest to use your file relative config will work, but babel docs suggest not doing this. I don't directly see any harm in doing this because it's only for tests.
you can do this via

    '^.+\\.[tj]sx?$': ['babel-jest', {configFile: path.resolve(__dirname, '.babelrc')}]

in your jest config transformers.

I'm going to talk with some other coworkers to see if they know of any unintended side effects of putting the preset in the root config would do. I presume it would be okay but I can imagine odd transform behaviors happening if your repo requires vastily different presets.

hopefully that provides some insight into your issue @seanaguinaga

[barbados-clemens]

@seanaguinaga
Looks like the issue here is 2 fold.
First, a preset needs to be applied to the files within the node_modules as the local .babelrc will only transform those local within the lib. This can be fixed in a couple of ways as patches until jest fully supports ESM.

1. provide a preset to the root babel.config.json file. i.e.

"presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic"
      }
    ]
  ]

2. manually provide the babel config to babel jest. i.e.

    '^.+\\.[tj]sx?$': ['babel-jest', {configFile: path.resolve(__dirname, '.babelrc')}]

though I think you'll run into issues with cross library support if the other libs require a different babel config.

The second issue you'll run into after getting the preset working is @nrwl/react/plugins/jest causing issues with files not being transformed correctly. We are patching that right now. if you're not needing it i.e. not using svg you can simply comment that transformer out for now.

Hopefully, that helps you move forward with this issue.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.