2

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.

Bazidoa
  • 44
  • 5

0 Answers0