Ionic 2 Unit Testing


#1

hi, i’m working on an ionic 2 app and i’m trying to introduce unit tests with karma, jasmine, and basic tests work, however when i try to import classes into my tests i’m receiving an error complaining about import being used. Any ideas on how I can introduce classes into my unit tests?


#2

Hard to know without any code, any description of what error your getting, how you’ve set up unit testing in the first place, etc…I don’t know how anyone is supposed to know the issue without any of that…

That being said I did write up a tutorial on setting up unit testing, might be worth a look through :wink:


#3

Thank you so much your tutorial was very helpful. I’m now receiving an error saying "module not found: error: can’t resolve and it gives the path to one of my images. Is this a problem in webpack that i need to resolve?


#4

That’s interesting, are you using the image directly in your component? If you can show me how you are using it I can try to reproduce it and get you an answer. It does sound like a webpack issue, but I wouldn’t think webpack would have any issues with images.


#5

So, sorry, I tried to simplify down the Angular config from the official tutorial (https://angular.io/docs/ts/latest/guide/webpack.html#!#test-configuration), but I simplified it a little too much.

The blog post has been updated and any imported images, fonts, etc should no longer cause an issue. The fix for you is to:

npm install null-loader --save-dev

Then in the webpack.test.config, add a this into the rules section below the html part (see updated blog post for more info):

,
  {
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
     loader: 'null-loader'
  }

#6

it’s resolved, thanks!


#7

Rob, I’m running into the same problem, but null-loader hasn’t resolved it

The screenshot is the ionic unit test example with an image added and inserted into page1.html.

Any ideas? I’m stuck and can’t integrate with my app until I can get this working.


#8

Well, that is interesting… :slight_smile:

There’s really now way that should happen, since you are telling webpack not to load that file (well, to use the null-loader on it, which doesn’t load it).

If you want to send me a github link to the project or something I can try to look at it for you, but other than that sorry I really don’t know, there’s no way you should be getting that.


#9

Here ya go: https://github.com/beloitdavisja/ionic-unit-test-images

The only alterations I’ve made were:

  • in package.json, set @types/jasmine to version 2.5.41 to avoid typescript compilation errors
  • remove all carrots (^) to freeze versions
  • added the mocha reporter for nice console output
  • added foo.png in src/assets/img/
  • added reference to foo.png in page1.html

I already tried removing node_modules and doing a fresh npm install. I know null-loader is working since I can point the loader for the typescript files to null-loader and it runs without error (since it’s running nothing at all, really)

Thanks for taking a look at it. I’m stumped.


#10

I think I’ve got something. Changed the img src to be root-relative (/assets/img/foo.png instead of assets/img/foo.png), and boom, tests passed.


#11

You are correct but…that might break once you deploy. Instead I’m going to propose a different solution where we stop the html loader from even trying to load any files. Change the html loader part to this:

{
    test: /\.html$/,
    loader: 'html-loader?attrs=false'
},

That way you can still use the relative path in your html, and your tests should still pass. Let me know if that works for you.


#12

Yup, I now remember why I had to make the src not root-relative. Won’t work when deploying on a device.

the attrs=false change works and tests are passing again. Thanks so much for the help!


#13

No problem, thank you for testing the setup, fixing this issue now saves me time later and makes for a better config for everyone. :thumbsup:


#14

best working and up to date solution I’ve found so far is https://github.com/marcoturi/ionic-boilerplate