Testing navigator.browserLanguage or navigator.language with Sinon.js

Question

How to use sandbox.stub of Testing framework Sinon to overwrite e.g. navigator.language or navigator.userAgent for testing?

When I try to use the following:

suite('agent', function () {
  var sandbox;
  setup(function () {
    // create sandbox environment for mocking about
    sandbox = sinon.sandbox.create();
  });
  teardown(function () {
    // restore the environment as it was before
    sandbox.restore();
  });
  test('language', function () {
    assert.equal(au.env.agent.language, navigator.language);
    if (!navigator.language) assert.equal(au.env.agent.language, 'de');
    var lang = "test_URK";
    sandbox.stub(window.navigator, 'language', lang);
    assert.equal(au.env.agent.language, lang);
  });
});

then I'll get the following error: Cannot stub non-existent own property language:

Non of these stubs work as expected:

sandbox.stub(window.navigator, 'language', lang);
sandbox.stub(navigator, 'browserLanguage', lang);

are mocking the navigator object.

Any hints?

score 3 · Answer 1 · edited May 23 '17 at 11:52

3

As described in Mocking a useragent in javascript?, you can:

  navigator.__defineGetter__('language', function(){
      return 'foo';
  });

~~Or the more modern:~~

  Object.defineProperty(navigator, 'language', {
      get: function() {return 'bar';}
  });

edited May 23 '17 at 11:52

Community

1
1

answered Jul 14 '16 at 19:22

abendigo

954
1
8
31

This does not work for me, getting `TypeError: Attempting to change access mechanism for an unconfigurable property.` using jasmine + karma. – Markus Jul 20 '16 at 09:17
my bad. In my sample code I had both, and the defineProperty worked after __defineGetter__, but when I commented out __defineGetter__, I got the same error as you. – abendigo Jul 20 '16 at 10:54
1

`defineProperty` works when you use a property descriptor like so: `Object.defineProperty(window.navigator, 'language', {value: 'en-US', configurable: true});` – Marcin Wolniewicz Nov 30 '16 at 11:10

score 1 · Answer 2 · answered Jul 20 '16 at 09:25

No need for Sinon here. The problem is, at least Chrome + Safari prevent changes to navigator.language (and others), as they are read-only. But you can just recreate the whole navigator object, as you anyway mocking it out.

navigator = {
    userLanguage: 'de',
    language: 'en'
};

In my tests, I would then just define the desired language before calling my functions.

// eg: following fn returns navigator.userLanguage || navigator.language;
navigator.userLanguage = undefined; // non IE
LanguageRedirection.getBrowserLanguage().then(function(lang){
   expect(res).toEqual('en');
});

score -2 · Answer 3 · answered Sep 27 '19 at 18:12

-2

This worked for me:

sinon.stub(global, "navigator").returns({
  userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
});

answered Sep 27 '19 at 18:12

armchairdj

1,030
11
13

Testing navigator.browserLanguage or navigator.language with Sinon.js

3 Answers3