Either my Jest plugin works or my npm run test in Angular 14 project

I'm in an Angular Jest configuration paradoxon please help me.

I am using Jest (Orta) plugin in VSCode for my Angular 14 project, but I need to make sure that my test are working fine from the command line as well.

If I fix one, the other is unable to handle my tests. If I use only either one all test cases pass so they are good.

npm run test from the command line with the configuration below passes, all green.

my setup-jest.ts file only contains one line

import './jest-global-mocks';

And my jest.config.ts file looks like this:

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

module.exports = {
preset: 'jest-preset-angular',
roots: ['<rootDir>/src'],
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
testMatch: ['<rootDir>/src/**/*.spec.ts', '<rootDir>/src/**/*.mjs'],
testPathIgnorePatterns: ['/node_modules/', 'dist'],
testEnvironment: 'jsdom',
moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
globalSetup: 'jest-preset-angular/global-setup',
collectCoverage: true,
collectCoverageFrom: [
'src/app/**/*.ts',
'!**/index.ts',
'!**/*.mock.ts',
'!**/*.module.ts',
'!**/routes.ts',
'!**/*.routes.ts'
],
...
};



If I run the plugin I have multiple errors:

"zone-testing.js is needed for the fakeAsync() test helper but could not be found. Please make sure that your environment includes zone.js/testing"

So I added zone.js/testing to the begging of the setup-jest.ts file. After running the tests from the plugin it says Zone is not defined, so I fixed that by adding zone.js to the imports in the setup-jest.ts file. Which at this point looks like this:

import 'zone.js';
import 'zone.js/testing';
import './jest-global-mocks';


Running the tests from the plugin runs into new errors: 'TypeError: Cannot read properties of null (reading 'ngModule')' 'Need to call TestBed.initTestEnvironment() first'

So I added this to the setup-jest.ts file:

import 'zone.js';
import 'zone.js/testing';
import './jest-global-mocks';
import { TestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());


At this point all tests pass if I run them from the plugin!

BUT! If I try to run from the command line with npm run test every one of my tests throw this error:

cannot set base providers because it has already been called

5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";
6 |
> 7 | TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());


Obviously because I added them the to other file, I get it but any idea how could I make both versions work? Thank you in advance

I also tried removing setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'], from jest.config.js and it fixes the command line approach but breaks the plugin one.

Continue reading...