Is fileReplacements available?

[yuwu9145]

Not 100% sure if the builder already has fileReplacements. For example, when running ng test, wish it would load a different environment file.

[just-jeb]

I assume you're talking about Jest builder, right? If so, fileReplacements option is not available for this builder. To be honest I don't see any reason for having this option in the builder.
If you want to run test environment specific code you can do that in jest-setup file, if you want to replace an import with a mock module you can do that with jest.mock.
Could you elaborate on your specific use case?

[zaalbarxx]

Well, I also happened to encounter some issues with the fact that you cannot replace environments on the fly. I could create workaround for it, but basically I have two sets of tests, unit tests for components etc. and for Pact contract testing. My HttpService is configured this way so base URL is provided from environment.baseApiUrl. Now the problem is that I'd like unit tests to be ran with base URL of http://localhost:4200 while for Pact tests I have to set the base URL to Pact server which is http://localhost:8989. My current solution is overcoming this problem by using injection tokens and passing different base URL for different root modules. But it would be nice if I could just replace an environment file for this.

[notbenj]

I have the same issue in my project, I would need fileReplacements in order to replace environment before running ng test. My current solution is to create a script, which will first replace environment file, and then run ng test, but it's kinda ugly. Could you please reconsider the need for fileReplacements in this builder?

[yuwu9145]

Hi @just-jeb & @notbenj ,

I actually resolved the issue by using the exact way that was suggested by @just-jeb . But I forgot to update this issue, sincerely apologize.

This is what I did:

All my jest setup configuration is set up in package.json like this

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "./src/setupJest.ts"
    ],
    "transform": {
      "^.+\\.(ts|html)$": "./node_modules/jest-preset-angular/preprocessor.js",
      "^.+\\.js$": "babel-jest"
    },
    "moduleFileExtensions": [
      "ts",
      "js",
      "html"
    ],
    "modulePathIgnorePatterns": [
      "<rootDir>/src/app/shared/testing-helper.ts",
      "<rootDir>/src/environments/environment.test.ts"
    ],
    "moduleNameMapper": {
      "@shared/(.*)$": "<rootDir>/src/app/shared/$1",
      "@appStore/(.*)$": "<rootDir>/src/app/store/$1",
      "@features/(.*)$": "<rootDir>/src/app/features/$1",
      "@testMocks/(.*)$": "<rootDir>/src/app/test-mocks/$1",
      "@enviornments/environment": "<rootDir>/src/environments/environment.test"
    },
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!rxjs|@angular/core|service-layer)"
    ],
    "coverageReporters": [
      "lcov",
      "cobertura"
    ]
  }

If you read it through, you should be able to see a key called moduleNameMapper which has a mapping as "@enviornments/environment": "<rootDir>/src/environments/environment.test".

So in all my test files & files that are supposed to be tested, evironment file can be used as normal way import { environment } from '@enviornments/environment';

As you can see, instead of relying on angular.json to replace @enviornments/environment'; with other environment file on fly, this jest set up will do the job.

Therefore, running jest has nothing to do with this builder.

If it is confusing, I do not mind to set up a sample angular app running upon jest that loads different environment file on fly, please just let me know :).

Hope this helps!

[notbenj]

hi @yuchaosydney ,

If I were to follow what you did, I would have to change all the imports in my code, to use the alias. It seems quite frustrating.

Also, I think that relying on angular.json is by far cleaner and more angular-oriented, than what you suggest.

Am I the only one who thinks that what you suggest is not the proper solution? This issue should not be closed in my humble opinion.

Thank you.

[yuwu9145]

Hi @notbenj ,

I am not entirely sure if my solution is 100% right but I am pretty sure moduleNameMapper in jest configure shall help.

Would you mind to provide how do you import environment in your app files as well as your test files? Or if you could set up a very simple sample angular project that simulates your project would be better, I will be able to make a config based on your sample project.

I will reopen the issue util we find a proper solution :).

Thank you!