How to use with jest?

[Voldemat]

TypeError: Cannot read properties of undefined (reading 'NG_APP_GRAPHQL_ENDPOINT')

  1 | export const environment = {
> 2 |     graphqlEndpoint: import.meta.env.NG_APP_GRAPHQL_ENDPOINT
    |                                      ^
  3 | }

  at src/app/environment.ts:2:38

Looks like @ngx-env/builder is not loaded, how I can setup env from code. I would probably put it in setupJest.ts file, where it will be loaded on jest startup.

[t-mish]

Yes, the same question

[pbintcha]

same issue, no idea how to setup jest tests with this great library

[chihab]

I've just released a package that should help with the setup.
https://www.npmjs.com/package/@dotenv-run/jest-angular

Could you please give it a try?

[facusantillo]

I have tried it but didn't make it work, I have different kinds of errors:

This is my old jest.config where everything worked just fine:

module.exports = {
  collectCoverage: true,
  coverageDirectory: '<rootDir>/coverage/',
  coverageReporters: ['json', "lcov", 'text', 'cobertura'],
  transform: {
    '^.+\\.(ts|js|html)$': ['jest-preset-angular', {
      tsconfig: 'tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$',
    }],
  },
  preset: 'jest-preset-angular',
  reporters: [
    'default',
    [
      'jest-junit',
      {
        outputDirectory: 'testresults',
        outputName: 'unit-results.xml'
      }
    ]
  ],
  setupFilesAfterEnv: [
    '<rootDir>/setup-jest.ts',
    '@testing-library/jest-dom'
  ],
  testMatch: ['<rootDir>/src/**/*.spec.ts'],
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1'
  }

Then I applied everything like the guide says:

module.exports = {
  collectCoverage: true,
  coverageDirectory: '<rootDir>/coverage/',
  coverageReporters: ['json', 'lcov', 'text', 'cobertura'],
  
  preset: 'jest-preset-angular/presets/defaults-esm',
  
  reporters: [
    'default',
    [
      'jest-junit',
      {
        outputDirectory: 'testresults',
        outputName: 'unit-results.xml',
      },
    ],
  ],

  setupFilesAfterEnv: [
    '<rootDir>/setup-jest.ts',
    '@testing-library/jest-dom',
  ],
  
  testMatch: ['<rootDir>/src/app/**/*.(spec|jest).ts'],

  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
    '^rxjs(/operators$)?$': '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
    tslib: '<rootDir>/node_modules/tslib/tslib.es6.mjs',
  },

  transform: {
    '^.+\\.(ts)$': [
      '@dotenv-run/jest-angular',
      {
        useESM: true,
      },
    ],
  },

  transformIgnorePatterns: [
    '/node_modules/(?!.*\\.mjs$)',
  ],
};

Also created the jest-setup like so:

import 'jest-preset-angular/setup-jest.mjs';
import { env } from '@dotenv-run/core';

env({
  root: '.',
  files: ['.env', '.env.app'],
});

With this configuration, Jest is not able to parse the files in my project

[Frankitch]

I'm facing the same issue, has anyone found some workaround? 🙂

[Aarklendoia]

Here's my working configuration (Angular 19) with the recommended syntax and using @dotenv-run/jest-angular:

The jest.config.ts file :

import presets from 'jest-preset-angular/presets';

const presetConfig = presets.createEsmPreset();

const jestConfig = {
    ...presetConfig,
    setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"],
    testMatch: ["<rootDir>/src/app/**/*.(spec|jest).ts"],
    moduleNameMapper: {
        "^rxjs(/operators$)?$":
            "<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js",
        tslib: "<rootDir>/node_modules/tslib/tslib.es6.mjs",
        "^.+\\.(css|scss)$": "identity-obj-proxy",
    },
    transform: {
        "^.+\\.(ts|mjs|js|html)$": [
            "@dotenv-run/jest-angular",
            {
                useESM: true,
                stringifyContentPathRegex: "\\.(html|svg)$",
                tsconfig: "<rootDir>/tsconfig.spec.json",
            },
        ],
    },
    transformIgnorePatterns: [
        "node_modules/(?!.*\\.mjs$)"
    ],
    collectCoverage: true,
    coverageReporters: ["html", "text-summary"],
};

export default jestConfig;

And the setup-jest.ts (you can modify it to use zone.js, juste remove "less"):

import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';

setupZonelessTestEnv();

import { env } from "@dotenv-run/core";
env({ root: "../../..", files: [".env", ".env.app"] });

My tesconfig.spec.ts:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest"
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}