How to install a mock library into a unit test in Angular? I want to install sinon-chrome into a spectator test

Question

I am working on a Google Chrome extension which is written in angular and I need to write unit tests for components that make use of the Chrome API. I found a library that I believe will do the job.

https://www.npmjs.com/package/sinon-chrome

However, I do not have enough experience with Angular to know how exactly to put the library into use. The usage section says that I need to require the value in a constant, but I have no idea how or where that would go. Does that go in the unit test? Does that go in the karma file? What is the global.chrome that is found in the examples.

The code for my unit test. It otherwise runs fine except for this chrome mock issue.

const angularFireAuthMock = {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onAuthStateChanged: () => {},
};
 
describe('AppComponent', () => {
    let spectator: Spectator<AppComponent>;
    const createComponent = createComponentFactory({ component: AppComponent, mocks: [FirestoreService], providers: [{
        provide: AngularFireAuth, useValue: angularFireAuthMock,
    }] });
 
    beforeEach(() => {
        spectator = createComponent();
    });
 
    it('should create the app', () => {
        expect(spectator.component).toBeDefined();
    });
});

AppComponent is where the Chrome

Thanks for your help.

Answer 1

I would suggest you simply to check existing examples.

Go to their github: https://github.com/acvetkov/sinon-chrome

On the right side you can see "Used by". Go there: https://github.com/acvetkov/sinon-chrome/network/dependents?package_id=UGFja2FnZS0xMzc4MTk5MA%3D%3D

Then go to repo by repo and search in the search bar for "sinon-chrome" (without quotes)

This should show you how others use the package, and, I hope, it brings light on your question.