javascripttypescriptmocha.jschaimocha-webpack

How to mock navigator.language for typescript unit test


How do I mock the navigator.language to be defined from the unit test?

the code bellow returns

ReferenceError: navigator is not defined

language-service.ts

import { injectable } from "inversify";

@injectable()
export class LanguageService  {
    public getBrowserLanguage(): string {
        return navigator.language.split("-")[0];
    }
}

language-service.spec.ts

// import stuff

    describe('Language Service tests', () => {
      it('should return de', () => {
        const language_service = new LanguageService();
        expect(language_service.getBrowserLanguage()).to.equal("de");
      });
    });

It sounds like a basic task but its not, because even if I try to define the navigator manually on the window object, typescript throws an error saying navigator is read only.


Solution

  • 1- install the jsdom package

    npm install jsdom jsdom-global --save-dev
    

    2- change your unit tests accordingly

    {
      "scripts": {
        "test": "mocha -r ts-node/register -r jsdom-global/register src/**/*.spec.ts"
      }
    }