Mocking in Typescript unit tests

Question

The problem is that mocking in Typescript can get tricky if the object is complex enough (well in any strongly-typed language). You would usually mock some extra stuff just to make code compile and in C# for instance, you can use AutoFixture or similar. On the other hand Javascript is dynamic language and it's possible to mock only part of the object that's needed for test to run.

So in Typescript unit test I can declare my dependency using any type and thus easily mock it. Do you see any drawbacks of such approach?

let userServiceMock: MyApp.Services.UserService = {
    // lots of thing to mock
}

vs

let userServiceMock: any = {
    user: {
         setting: {
             showAvatar: true
         }
    }
}

Solution 1

My experience with unit tests in TypeScript definitely shows that it's worth to keep all mock object typed. When you leave your mocks with a type of any it becomes problematic during a rename. IDE won't correctly discover which occurrences of the user or settings param should be changed. Of course writing mock object manually with a complete interface is really laborious.

Fortunately there are two tools for TypeScript that allows creating type-safe mock objects: ts-mockito (inspired by Java mockito) and typemoq (inspired by C# Moq).

Solution 2

Now that TypeScript 3 is out, full strong typing can finally be expressed! I took advantage of this and ported NSubstitute to TypeScript.

It can be found here: https://www.npmjs.com/package/@fluffy-spoon/substitute

I made a comparison versus most popular frameworks here: https://medium.com/@mathiaslykkegaardlorenzen/with-typescript-3-and-substitute-js-you-are-already-missing-out-when-mocking-or-faking-a3b3240c4607

Notice how it can create fakes from interfaces, and have full strong typing along the way!

Solution 3

As pointed out by @Terite any type on mocks is poor choice as there would be no relationship between mock and its actual type / implementation. So improved solution may be casting partially-mocked object to mocks type:

export interface UserService {
    getUser: (id: number) => User;
    saveUser: (user: User) => void;
    // ... number of other methods / fields
}

.......

let userServiceMock: UserService = <UserService> {
    saveUser(user: User) { console.log("save user"); }
}
spyOn(userServiceMock, 'getUser').andReturn(new User());
expect(userServiceMock.getUser).toHaveBeenCalledWith(expectedUserId);

It also worth mention that Typescript won't allow to cast any object that has extra members (superset or derived type). Means that your partial mock is actually of base type to the UserService and can be safely cast. e.g.

// Error: Neither type '...' nor 'UserService' is assignable to the other.
let userServiceMock: UserService = <UserService> {
     saveUser(user: User) { console.log("save user"); },
     extraFunc: () => { } // not available in UserService
}