Receiving `ERROR in multi styles.css` when trying to run ng test

Question

After upgrading Angular to 7.2.6, I can successfully build using ng build but when I run ng test I get the following Error. I've tried adjusting the path to styles.css in my angular.json file, and still receive the same error. I'm at a loss for what is happening. I'm using Ionic 4 as well.

ERROR in multi ./styles.css
Module not found: Error: Can't resolve '/Users/zsoflin/Documents/GitHub/Layer/styles.css' in '/Users/zsoflin/Documents/GitHub/Layer'
resolve '/Users/zsoflin/Documents/GitHub/Layer/styles.css' in '/Users/zsoflin/Documents/GitHub/Layer'
  using description file: /Users/zsoflin/Documents/GitHub/Layer/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zsoflin/Documents/GitHub/Layer/package.json (relative path: ./styles.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.js doesn't exist
      as directory
        /Users/zsoflin/Documents/GitHub/Layer/styles.css doesn't exist
[/Users/zsoflin/Documents/GitHub/Layer/styles.css]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.ts]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.tsx]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.mjs]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.js]
 @ multi ./styles.css styles[0]

My package.json dependencies:

"dependencies": {
    "@angular/animations": "^7.2.6",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.6",
    "@angular/core": "^7.2.6",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^7.2.6",
    "@angular/http": "^7.2.6",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.6",
    "@angular/platform-browser-dynamic": "^7.2.6",
    "@angular/pwa": "^0.13.1",
    "@angular/router": "^7.2.6",
    "@angular/service-worker": "^7.2.6",
    "@capacitor/android": "^1.0.0-beta.17",
    "@capacitor/cli": "^1.0.0-beta.17",
    "@capacitor/core": "^1.0.0-beta.17",
    "@capacitor/ios": "^1.0.0-beta.17",
    "@firebase/app-types": "^0.3.4",
    "@firebase/messaging": "0.3.4",
    "@ionic-native/core": "^5.0.0-beta.22",
    "@ionic-native/firebase": "^5.2.0",
    "@ionic-native/splash-screen": "^5.2.0",
    "@ionic-native/status-bar": "^5.2.0",
    "@ionic/angular": "^4.0.2",
    "@ionic/ng-toolkit": "1.1.0",
    "@ionic/pro": "^2.0.4",
    "@ionic/schematics-angular": "^1.0.7",
    "@types/stripe": "^5.0.25",
    "angular2-text-mask": "^9.0.0",
    "angular2-uuid": "^1.1.1",
    "angularfire2": "^5.1.1",
    "core-js": "^2.5.3",
    "firebase": "^5.8.4",
    "firebaseui": "^3.5.2",
    "hammerjs": "^2.0.8",
    "ionicons": "^4.5.5",
    "ng-animate": "^0.3.4",
    "ng-pipes": "^0.1.2",
    "ng-stripe-checkout": "^1.0.4",
    "ngx-color": "^2.0.5",
    "ngx-device-detector": "^1.3.5",
    "ngx-papaparse": "^3.0.0",
    "ngx-stripe": "^6.0.0-rc.0",
    "node-sass": "^4.10.0",
    "rxjs": "6.4.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.7.5",
    "@angular-devkit/build-angular": "^0.13.3",
    "@angular-devkit/core": "^0.7.5",
    "@angular-devkit/schematics": "^0.7.5",
    "@angular/cli": "^7.3.3",
    "@angular/compiler": "^7.2.6",
    "@angular/compiler-cli": "^7.2.6",
    "@angular/language-service": "^7.2.6",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.5.8",
    "codelyzer": "^4.4.4",
    "css-loader": "^2.1.0",
    "firebase-tools": "^6.4.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "modules": "^0.4.0",
    "protractor": "^5.4.1",
    "style-loader": "^0.23.1",
    "ts-node": "^7.0.1",
    "tslint": "~5.11.0",
    "typescript": "^3.2.4"
  }

My test config in angular.json file:

"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": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              "src/main-sw.js",
              "src/firebase-messaging-sw.js",
              "src/manifest.webmanifest"
            ]
          }
        },

Answer 1

looks like is trying to get the styles from architect > build > options > styles (angular.json). just copy the styles to architect > test > options > styles and run again the test. it work for me!

To clarify, make sure in your angular.json file that the styles section in your test section matches your build section (or is at least valid) ex angular.json: