How to run Angular 7 unit tests with custom environment.test.ts settings?

Question

How do I get the Angular CLI to serve up the right environments/environment*.ts file in Angular 7?

I've tried configuring the replacement of the environment.ts with environment.test.ts in three different places with no success.

I've tried running it with ng test and with ng test --configuration test.

Every single time, if I debug the tests, I find that it's using environment.prod.ts(?!) instead of environment.test.ts.

Here is a screenshot to show the three places I've tried to do the fileReplacements: Here is the entire config for reference:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mms": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "mms",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mms",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "styles": [
              "src/styles.scss",
              "src/assets/libs/pikaday/pikaday.scss",
              "src/assets/scss/dragula/dragula.css",
              "src/assets/libs/hopscotch/css/hopscotch.css",
              "src/assets/scss/site.scss"
            ],
            "scripts": [
              "src/assets/libs/hopscotch/js/hopscotch.js",
              "src/assets/libs/pikaday/pikaday.js",
              "src/assets/libs/bitmovin-loader.js"
            ]
          },
          "configurations": {
            "test": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
              }]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/index.html",
                  "with": "src/index.prod.html"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "mastermock": {
              "main": "src/main-mock.ts",
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.mock.ts"
              }]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mms:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "mms:build:production"
            },
            "mastermock": {
              "browserTarget": "mms:build:mastermock",
              "proxyConfig": "proxy.conf.json"
            }
          }
        },
        "serve-local": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mms:build",
            "proxyConfig": "proxy.local.conf.json"
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mms:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "codeCoverageExclude": [
              "**/*.mock.ts",
              "**/*.module.ts"
            ],
            "fileReplacements": [{
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.test.ts"
            }]
          },
          "configurations": {
            "test": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
              }]
            },
            "production": {
              "karmaConfig": "src/karma.conf.prod.js"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "**/*.dev.ts",
              "**/e2e/**"
            ]
          }
        }
      }
    },
    "mms-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.dev.js",
            "devServerTarget": "mms:serve"
          },
          "configurations": {
            "local": {
              "protractorConfig": "e2e/protractor.conf.dev.js",
              "devServerTarget": "mms:serve-local"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "mms",
  "schematics": {
    "@ngrx/schematics:component": {
      "styleext": "scss"
    }
  },
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  }
}

Answer 1

1. This was caused by Visual Studio Code "helping" me by importing: import { environment } from '@environments/environment.prod';
2. The right place for fileReplacements is in architect.test.options.fileReplacements.
3. In order to prevent VSCode from ever "helping" me like this again, I'm going to rename all of the environment.*.ts files other than environment.ts to something like DO-NOT-IMPORT.ENVIRONMENT.*.ts. At least that'll yell at me if I get the wrong import.