Adding ngx-cookie-service broke Jest tests

[stevermeister]

Adding ngx-cookie-service broke Jest tests

[kburns1]

Still running into this issue under ^2.1.0. Any one else?

[KiranMantha]

Hi All,

I just found a solution to this problem.

1. add a folder __mocks__ in root folder where the node_modules folder reside.

2. add ngx-cookie-service.js file in __mocks__ folder and place the following code:

class MockCookieService {
  constructor() {
    this._cookieReg = {};
  }
  check(name) {
    return this._cookieReg[name] ? true : false;
  }
  get(name) {
    return this._cookieReg[name];
  }
  getAll() {
    return this._cookieReg;
  }
  set(
    name,
    value,
    expires,
    path,
    domain,
    secure,
    sameSite
  ) {
    this._cookieReg[name] = name + '=' + value;
  }
  delete(name, path, domain) {
    delete this._cookieReg[name];
  }
  deleteAll(path, domain) {
    this._cookieReg = {};
  }
}

module.exports = {
  CookieService: MockCookieService
};

3. now in actual component spec file, place the following code:

import { CookieService } from 'ngx-cookie-service';
jest.genMockFromModule('ngx-cookie-service');
TestBed.configureTestingModule({
  declarations: [Your-Component],
  providers: [CookieService]
})

4. now run jest the tests will run fine.

[evtk]

checking in to report the same issue.

[danil-z]

I've tried following jest config without luck:

  preset: 'jest-preset-angular',
  transform: {
    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
    '^.+\\.js$': 'babel-jest'
  },
  transformIgnorePatterns: [
    'node_modules/(?!@ngrx)',
    'node_modules/(?!ngx-cookie-service)'
  ]

with babel packages installed (npm i -D babel-jest babel-preset-env)

[leonaAtkins]

Hi All,

I just found a solution to this problem.

1. add a folder __mocks__ in root folder where the node_modules folder reside.
2. add ngx-cookie-service.js file in __mocks__ folder and place the following code:

class MockCookieService {
  constructor() {
    this._cookieReg = {};
  }
  check(name) {
    return this._cookieReg[name] ? true : false;
  }
  get(name) {
    return this._cookieReg[name];
  }
  getAll() {
    return this._cookieReg;
  }
  set(
    name,
    value,
    expires,
    path,
    domain,
    secure,
    sameSite
  ) {
    this._cookieReg[name] = name + '=' + value;
  }
  delete(name, path, domain) {
    delete this._cookieReg[name];
  }
  deleteAll(path, domain) {
    this._cookieReg = {};
  }
}

module.exports = {
  CookieService: MockCookieService
};

1. now in actual component spec file, place the following code:

import { CookieService } from 'ngx-cookie-service';
jest.genMockFromModule('ngx-cookie-service');
TestBed.configureTestingModule({
  declarations: [Your-Component],
  providers: [CookieService]
})

1. now run jest the tests will run fine.

I've tried this but still getting the errors.

I'm still getting

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

I've switched to ngx-cookie instead, which uses an additional dependency which isn't ideal but at least the tests work.

[daddyschmack]

Yes, still encountering issue, and followed the instructions to implement babel.. no joy...

[adover]

Same here. Not found a fix yet.

[flakolefluk]

The problem is that ngx-cookie-service is compiled to es2015, which must be transformed before tests.
you can make it work by installing babel-jest and babel-prest-env

npm install --save-dev babel-jest babel-preset-env

then in your package json where the jest config is:

    "jest": {
        ....some stuff in here
        "transformIgnorePatterns": [
              "node_modules/(?!(ngx-cookie-service)/)"
        ],
        "transform": {
         "^.+\\.js$": "babel-jest"
    }

and create a .babelrc file in the project root with

{
  "presets": ["env"]
}

[kedruff]

The problem is that ngx-cookie-service is compiled to es2015, which must be transformed before tests.

Actually, the bigger issue is that ngx-cookie-service isn't bundled in proper Angular Package Format... if it were, it would work no problem.

[flakolefluk]

The problem is that ngx-cookie-service is compiled to es2015, which must be transformed before tests.

Actually, the bigger issue is that ngx-cookie-service isn't bundled in proper Angular Package Format... if it were, it would work no problem.

The issue is related to Jest not transforming the files in node_modules folder.
Changing the source tsconfig to compile to es5 would solve the issue as well without needing to install babel-jest or anything. Angular Package Format includes multiple output formats, but if you import es2015 in your test, it would still fail.

[dereklin]

I combine these solutions to get my testing somewhat working: #39 (comment) and just-jeb/angular-builders#85 (comment)

I have a nrwl/nx mono repo. I have been using jest to test everything on one-go. All the tests pass with no issues.

I try to convert one app from karma to jest so that I can do this with jest:

ng test app1

I get this error:

/workspace/node_modules/ngx-cookie-service/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './cookie-service/cookie.service';
                                                                                             ^^^^^^

With the combined solution, when I have my transform like this:

  transform: {
    '^.+\\.(ts|html)$': 'jest-preset-angular/preprocessor.js'
  },

Running tests for the whole mono repo works, but the individual app will fail.

When I have it like:

  transform: {
    '^.+\\.(ts|html)$': 'jest-preset-angular/preprocessor.js',
    '^.+\\.js$': 'babel-jest'
  },

The individual app tests will pass, but the mono repo tests will fail
...

[JoA-MoS]

Upgrading ngx-cookie-service to ^2.1.0 fixed the problem for me. If you can try updating ngx-cookie-service

EDIT: Also, you need to have the __mocks__ file as mentioned by @KiranMantha. I did not need to add it to all my tests as indicated in step 3 as jest will do that automatically when it finds in import in the mocks folder

[rbinsztock]

Why this issue is closed ?

I updated from 2.1.0 to 2.2.0 and the error disappear.

[FloNeu]

Was looking for something different - but as i ran into the 'same' problem with jest and another library - related to jest not transforming esm modules - i will leave this link here to save someone the headacke https://stackoverflow.com/questions/70571424/angular-v13-jest-with-nx-test-syntaxerror-cannot-use-import-statement-outside/70615775#70615775