jest-preset-angular: Adding ANY transformignorepaths results in errors

Question

We've just upgraded to Angular 16 and our testing suite with jasmine and karma no longer works - much like some other users who have posted issues, our testing suite hangs for a really long time after it's completed and it's causing some headaches with running tests and especially with CICD. We're looking at moving over to jest, and for the most part it's been fine.

We have an imported module or two that aren't being transpiled properly (specifically aws-amplify) which is giving us invalid token 'export' errors.

It's been suggested that the solution for this is to add "transformIgnorePatterns": ["node_modules/(?!@aws-amplify)"] to our package.json

The minute we add this, we start getting SyntaxError: Cannot use import statement outside a module specifically pointing to the line import 'jest-preset-angular/setup-jest'; in our setup-jest.js file

Haven't been able to find any way around this.

In an attempt to fix this, we went right to jest-preset-angular's example packages and copied them almost directly.

Here's our current setup

jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;

// eslint-disable-next-line no-undef
globalThis.ngJest = {
  skipNgcc: false,
  tsconfig: 'tsconfig.spec.json',
};

/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
module.exports = {
  preset: 'jest-preset-angular',
  globalSetup: 'jest-preset-angular/global-setup',
  moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
};

setup-jest.ts

import { TextEncoder, TextDecoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

tsconfig.spec.json

    "compilerOptions": {
        "esModuleInterop": true,
        "outDir": "./out-tsc/spec",
        "module": "CommonJs",
        "types": [
            "node",
            "jest"
        ]
    },
    "extends": "./tsconfig.json",
    "include": [
        "**/*.spec.ts",
        "**/*.d.ts"
    ]
}

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es2020",
            "dom"
        ],
        "module": "es2020",
        "moduleResolution": "node",
        "outDir": "./dist/out-tsc",
        "paths": {
            "components": [
                "dist/components/components",
                "dist/components"
            ]
        },
        "sourceMap": true,
        "target": "ES2022"
    }
}

With this setup, our test suites all pass, except for one, which is referencing aws-amplify.

SyntaxError: Unexpected token 'export'

      1 | import {Injectable} from '@angular/core';
    > 2 | import { Auth } from 'aws-amplify';

Re-implementing the proposed solution which is to add transformIgnorePatterns: ["node_modules/(?!@aws-amplify)"] to our jest.config.js file results in every suite failing with the message:

SyntaxError: Cannot use import statement outside a module

    > 1 | import 'jest-preset-angular/setup-jest';

I'm at a bit of a loss now. I can't tell you the number of things I've tried, the number of google searches I've browsed, over the last two days.

Answer 1

The answer ended up being to add a transform to jest.config.ts

    transform: {
        '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular'
    },

That way, adding transformIgnorePatterns worked as expected in this format:

transformIgnorePatterns: ['<rootDir>/node_modules/(?!@angular|@aws-sdk|highcharts-angular|@ng-bootstrap|@progress)']

It ended up illuminating another underlying problem that is impossible to fix at this juncture, but at least I got past this step.