Category: Jasmine

If your wrap your unit tests in one global function, that function name must be unique across all of your tests

I have some OCD issues. I guess that’s why I like writing code. My OCD tendencies are no less apparent in my unit tests: I tend to wrap all of my tests in a global function.

The main reason for this is: test data.

Test data is a reality of unit tests and something that happens often. But I really hate to see a whole bunch of boilerplate code at the top of a unit test. I don’t want to see all of that, I just want to jump into the tests. So what I do is: I create all of the test data at the bottom of the file. I feel that this makes the unit tests much easier to read.

But since I want all of the test data to be available before the tests run, I wrap all of the tests in a function, create the test data, and then execute the function that contains all of the tests.

Example # 1

In example # 1, I’ve set up a unit test. The test data is at the top of the file, which to me make the test hard to read.

Example # 2:

In example # 2, I wrapped the unit tests in the function: runTests. This way I create the tests, create the test data, and then execute the runTests function. I like this approach because my test data is at the bottom of the file, and the actual unit test is at the top, which I feel makes the code easier to read.

After upgrading to Angular 4 (and subsequently upgrading the npm packages karma & karma-jasmine), I got a whole bunch of instances of this error: ERROR in [at-loader] Duplicate function implementation. I don’t get the error if there is only one unit test, but as soon as I introduce more than one unit-test file, I get the error (and the more files there are, the more errors there are).

This took a bit to figure out, but I finally got it. My runTests function is a global, and Jasmine does not like when there is more than one instance of it declared.

Example # 3:

In example # 3, I renamed the runTests function to runTests_ServiceA. And in each unit test file, I did the same exact thing. For example: runTests_ServiceB, runTests_ServiceC, runTests_ServiceD, etc…

This way, each runTests function  has a unique name. While I don’t always have test data, this is just a pattern I like to follow. The latest versions of the karma & karma-jasmine npm packages did not like the fact that multiple instance of the runTests function  were being declared, so I just make sure that in each unit test file, that function has a unique name. An easy way to do this is to simply append “_ServiceName” to runTests. But as long as the function name is unique, any name will do.

After upgrading from Angular 2 to Angular 4, Jasmine started to complain about values that did not even exist in my unit tests

I recently posted an article about a Jasmine issue that arose with regards to the globals: describe, beforeEach, expect and it. That turned out to be related to how types are handled in Angular 4.

Once I got that problem straightened out, there were some really odd errors. The thing that was driving me nuts was: the values that Jasmine complained about did not even exist in my unit tests… gggrrrrr.

This is one that could have taken forever. Actually, I did spend at least 30 minutes scratching my head. Fortunately, I found the answer on Github: I needed to make a change to tsconfig.json. In the compilerOptions object, set noImplicitAny to false.

For example:

Credit goes to Zama Khan Mohammed for this answer.

 

After upgrading from Angular 2 to Angular 4, there were some delightful new errors in my unit tests

After some initial hair-pulling, I’ve finally got my unit tests working again after upgrading from Angular 2 to Angular 4. But once I started running the tests, I found these lovely errors:

I knew it could not be the unit tests themselves; it had to be something low-level. Then it occurred to me that in my Angular 2 implementation, I had a typings.json file in the root of my application to handle types such as jasmine , lodash and moment. But with Angular 4, types are handled in package.json via the @types namespace.

So, after some searching, I found this Stackoverflow article: Angular 2 Unit Tests: Cannot find name ‘describe’. The solution provided worked perfectly for me.

Two Steps:

1 – In package.json, add this line to your devDependencies:

2 – And then in your unit test file (i.e. XXX.spec.ts), add this line:

All of the errors that complain about describe, beforeEach, expect and it should no longer appear in your terminal.

Major credit goes to ksharifbd for this answer. This was a major time-saver!