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

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',
'nodeath': 'commonjs2 nodeath',
'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.

Continue reading...