CODEWITHSUNDEEP
ionic-frameworkjestjsbabel-jest
blackwolf123333
blackwolf123333

Reputation: 313

Unit testing ionic services with jest

I'm building an ionic app and would like to add unit tests for a couple of services. I'm trying to get jest working with typescript but it doesn't seem to play well.

I'm getting this error:

/myuser/project/node_modules/@ionic/storage/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } from '@angular/core';
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

Now I have read that you have to add the babel-plugin-transform-es2015-modules-commonjs and use that in the test env of babel. However I am using babel 7 and this plugin is not available for babel 7. Is there a different solution?

I will also provide my package.json and .babelrc below. gist

Upvotes: 1

Views: 1304

Answers (1)

Olivercodes
Olivercodes

Reputation: 1058

You just need to add @ionic/storage to your transformIgnorePatterns in jest config. For example, here's mine, take note of the @ionic/storage part:

"transformIgnorePatterns": [
      "node_modules/(?!@ngrx|moment|@ionic/storage|@ionic-native)"
    ]

Additionally, make sure in your tsconfig compiler options you have module: 'commonjs'

Also, if you need localstorage mocks, you can just use the following npm module:

npm install --save-dev jest-localstorage-mock

and then (in your setupJest.ts file)

import 'jest-localstorage-mock

Lastly, I recommend taking a look at: https://github.com/thymikee/jest-preset-angular for more help with jest + ionic configurations.

Upvotes: 1

Related Questions