Testing - After Angular 15 Update throws Error "__webpack_require__(...).context is not a function"

Question

After the Update from Angular 14 to 15 my Tests won't run anymore. When I run ng test I get the following Error:


An error was thrown in afterAll
  Uncaught TypeError: __webpack_require__(...).context is not a function
  TypeError: __webpack_require__(...).context is not a function
      at Module.4289 (http://localhost:9876/_karma_webpack_/webpack:/src/test.ts:22:30)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at __webpack_exec__ (http://localhost:9876/_karma_webpack_/main.js:180646:48)
      at http://localhost:9876/_karma_webpack_/main.js:180647:54
      at Function.__webpack_require__.O

My test.ts file looks like this and is set in the angular.json as "main".

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import "zone.js/testing";

import { getTestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context: any = require.context("./", true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

I tried removing the file but this does not seem to solve the Problem. After that I got Error in Third Party Libraries (dhtmlx gantt) that don't come up when running the app with ng build. ng build runs fine, the app works - only the tests are failing.

score 29 · Accepted Answer · answered Dec 22 '22 at 09:54

29

The upgrade tool removes the context lines because they are not necessary anymore, try this:

    // This file is required by karma.conf.js and loads recursively all the .spec and framework files

import "zone.js/testing";

import { getTestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

answered Dec 22 '22 at 09:54

Oscardrbcn

508
5
13

1

yes, thank you, I have an upgraded v15 app and i replaced the test.ts file with this and now it all works! High five – J King Jan 10 '23 at 21:37
Thank you very much - this is was a massive help – Ben Hayward Jan 26 '23 at 11:36
Bro! hats off to you. I was struggling to make it work. And this worked like a charm!! Lets have some beer someday. – mohit Mar 23 '23 at 18:54
1

I can confirm that this answer works. I have replaced the contents of test.ts with this, which did the trick. God bless you! – Mihai Paraschivescu May 08 '23 at 04:17
this is for src/test.ts file – ph4n70m May 23 '23 at 10:33

score 7 · Answer 2 · answered Jan 17 '23 at 07:30

7

Try to run

ng update @angular/cli --from 14 --to 15 --migrate-only

which should update test.ts file and remove require.context lines below

const context = require.context('./', true, /\.spec\.ts$/);
context.keys().forEach(context);

after that you can execute testing for a single or multiple files using --include param

ng test --include=**/some-file.spec.ts

answered Jan 17 '23 at 07:30

Alex Ryltsov

2,385
17
25

4

Where can I find information like that? I wonder why there is no information about those things in the official angular update guide. – himtim Jan 17 '23 at 13:47

Testing - After Angular 15 Update throws Error "__webpack_require__(...).context is not a function"

2 Answers2

Linked