0

I have just created a new angular app using the ng new <projectName>. I then changed the default testing setup by using ng add @cypress/schematic and ng add @briebug/jest-schematic

package.lock for reference:

{
  "name": "betting-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.1.2",
    "@angular/common": "~11.1.2",
    "@angular/compiler": "~11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/forms": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/router": "~11.1.2",
    "@briebug/jest-schematic": "^3.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-builders/jest": "latest",
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "~11.1.4",
    "@angular/compiler-cli": "~11.1.2",
    "@cypress/schematic": "^1.5.3",
    "@types/jasmine": "~3.6.0",
    "@types/jest": "latest",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "latest",
    "karma-coverage": "~2.0.3",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.2",
    "cypress": "latest"
  }
}

When I run ng test I get the above error and am struggling with how to get my tests to run. Any help would be great! Thanks in advance.

Alexander LeFevre
  • 55
  • 1
  • 7

2 Answers2

3

I found an answer here from searching Google.

Why do you need polyfills entry in your test target at all when using @angular-builders/jest builder? Here is the builder's schema, it doesn't contain a polyfills field. The reason you're getting this error is that all the additional (non-schema) fields are considered an array of strings (so that you'd be able to pass filenames to ng test just like you pass them to jest).

My guess is that polyfills is a leftover from Karma builder and you can safely remove it. The only options needed in angular.json are those mentioned here.

karel
  • 5,489
  • 46
  • 45
  • 50
Alexander LeFevre
  • 55
  • 1
  • 7
1

OK, so whoever is finding this in 2023 and after, this is what you should do - go to your angular.json file, find the test object and make the polyfills and the inlineStyleLanguage an array like so:

        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "polyfills": [
              "src/polyfills.ts"
            ],
            "inlineStyleLanguage": [
              "scss"
            ],
          }
        },

And you should be good to go.

If you are trying to import JS files (like Lodash functions), you should also add the following line to your jest.config.js file:

module.exports = {
  transformIgnorePatterns: ['node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'],
};

This will prevent the TS transformation error ('SyntaxError: Unexpected token export').

Bullsized
  • 362
  • 4
  • 7