Cannot read properties of undefined (reading 'module') in Angular unit tests

Question

This is what we have in angular.json for testing.

 "test": {
          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "codeCoverage": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss",
              "src/styles/spartacus/storefinder.scss",
              "src/styles/spartacus/user.scss",
              "src/styles/spartacus/qualtrics-embedded-feedback.scss",
              "src/styles/spartacus/product.scss",
              "src/styles/spartacus/pdf-invoices.scss"
            ],
            "scripts": []
          }
        }

This is what we have in webpack.config.js.

const webpack = require("webpack");

module.exports = {
    // The following doesn't seem to have any effect
    // Set the target to 'node' if you're working on a Node.js environment
    target: 'web', // or 'web' for browser-based projects

    // Without this: node: is not supported blablabla
    // After this: module is not defined, require is not define
    externals: {
        'node:fs/promises': 'commonjs2 node:fs/promises',
        'node:fs': 'commonjs2 node:fs',
        'node:path': 'commonjs2 node:path',
        'node:url': 'commonjs2 node:url',
    },

    resolve: {
        alias: {
            require: 'undefined',
        },

        fallback: {
            "tty": require.resolve("tty-browserify")
        }
    },

    plugins: [
        new webpack.ProvidePlugin({
            require: ['module', 'require'],
        }),
    ],
};

This is what a typical test file looks like.

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Here is the error message I saw.

./src/app/app.component.spec.ts:7:18-25 - Error: Module not found: Error: Can't resolve 'module' in '/home/developer/cc/commerce/js-storefront/demostore/src/app/app'

./src/app/app.component.spec.ts - Error: Cannot read properties of undefined (reading 'module')

I have asked AI but it just says there might be a TestBed configuration problem without telling me what exactly it is. It also provided some solutions (like adding providers and services into the TestBed configuration) but none of them works.

I wonder if any other configuration is going wrong. I am using Angular 17 and this error only occurs in yarn test. yarn start and yarn build both are working perfectly.

Answer 1

Is AppComponent an standalone component? If yes, your beforeEach block should not declare the component, but rather just import it:

await TestBed.configureTestingModule({
  imports: [
    AppComponent
  ],
}).compileComponents();

Please share the code of your AppComponent.