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.