How to mock/spy an imported function in Angular unit testing

19,721

In your spec file import the helper this way:

import * as helper from './helper';

And in your it() you can spy on the helper object and return the requested value:

spyOn(helper, 'doSomething').and.returnValue({});
Share:
19,721
user7995820
Author by

user7995820

Updated on June 20, 2022

Comments

  • user7995820
    user7995820 about 2 years

    Let's say i have an angular 6 component with a method test which returns some value:

    import { doSomething } from './helper';
    
    @Component({
        ...
    })
    export class AppComponent {
        test() {
            const data = doSomething(1);
            return data.something ? 1: 2;
        }
    }
    

    doSomething is just a simple helper function:

    export function doSomething() {
        return { something: 1 };
    }
    

    Is it possible to mock or spy this function in a unit test (so i can control its returnValue)? Or do i have to change my approach in the component?

    Please note: doSomething() can be a lodash function, a const, a class etc. I just tried to keep the example as simple as possible.


    Things i've tried:

    • SpyOn doesn't work because function is not attached to anything

    • Importing an mock-function into the imports array of TestBed.configureTestingModule gives Unexpected value 'doSomething' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

    • Creating a service for it works but it feels silly to have to create services for each imported function