Jest Error: Cannot set base providers. After Angular v13 upgrade using 'ng test'

Question

After upgrading Angular to v 13 when I try to run my tests in the jest environment I have an error:

Cannot set base providers because it has already been called
import 'jest-preset-angular/setup-jest';

Additionally, I configured Jest like it pointed out in this post: https://thymikee.github.io/jest-preset-angular/docs/next/guides/esm-support/ but it does not help me. Need help. How can I fix my tests?

Straka

Answer 1

I've come across the same issue. It seems that ESM support with Angular 13 is not released yet. https://thymikee.github.io/jest-preset-angular/docs/next/guides/angular-13+

However, there's a PR already merged (https://github.com/thymikee/jest-preset-angular/pull/1122) that presumably should fix the issue.

Cumuliform

Answer 2

My solution was to remove the setup-jest.ts file, since import 'jest-preset-angular/setup-jest'; is already executed by @angular-builders/jest.

Kalsomine

When I remove that import from setup-jest.ts, ng tests works, but running jest from the command line (or VS Code Jest test explorer extension) fails due to various issues on Angular 13 / Jest 28.1.1. Seeing "In this configuration Angular requires Zone.js" " zone-testing.js is needed for the fakeAsync() test helper but could not be found." – Throb

Answer 3

In order to run Jest testing suite using the native ng test command, you had to install the @angular-builders/jest package.

If you take a look at the node_modules/@angular-builders/jest/dist/jest-config/setup.js you will see that the builder is importing jest-preset-angular/setup-jest for you.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("jest-preset-angular/setup-jest");
//# sourceMappingURL=setup.js.map

Now, you probably have a jest.config.js file within your project, and your configuration is likely to have the following property:

A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed.

setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],

Which means that jest will import setup-jest.ts before all your test, now within the setup-jest.ts you will likely have

import 'jest-preset-angular/setup-jest';

This is where you are importing jest-preset-angular/setup-jest twice.

To prevent this, either remove the import from the setup-jest.ts file or the file name from the setupFilesAfterEnv array.

Foulard

This is very weird, because according to the readme of jest-preset-angular you have to call the setup-jest file yourself: github.com/thymikee/… – Edmon

Answer 4

In my case I had to use this condition in order to distinguish between running the tests from npm start and ng test.

// Don't set setupFilesAfterEnv in case of running from ng cli (ng test)
if (!process.argv.some((item) => item.includes('@angular\\cli\\bin\\ng'))) {
    config.setupFilesAfterEnv = ["<rootDir>/tests/setup.ts"];
}

Pare

Answer 5

Same problem. jest-preset-angular v11.1

If I delete the 'jest-preset-angular/setup-jest' file and run the tests via jest

Got error:

The injectable 'PlatformLocation' need to be compiled...

If I add the file and run tests via angular cli

Got error:

Cannot set base providers...

But I wanted to use both command.

On the example page https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13 I did not find that they use angular cli (it seems there is still karma left from the standard builder in angular.json)

So I did condition in setup-jest.ts (yes it's terrible but i didn't find another way)

//setup-jest.ts
if (!process.env[1].includes('ng.js')) {
   require('jest-preset-angular/setup-jest')
}

Lavinalavine