How to use with jest? - Githubissues

Voldemat commented 1 year ago

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 commented 7 months ago

Yes, the same question

pbintcha commented 6 months ago

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

chihab commented 6 months ago

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 commented 1 month ago

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

chihab / dotenv-run

How to use with jest? #49