window.location.href can't be changed in tests.

[sterpe]

Hi @cpojer,

This is actually more of a jsdom@8 issue...see jsdom/jsdom#1388, but I want to pin here as well so Jest picks up whatever solution jsdom comes up with.

Previously with jest-cli@0.8/jsdom@7.x you could write a test like this:

jest.autoMockOff()
jest.setMock('../lib/window', window)

jest.mock('cookies-js')
jest.mock('query-string')
jest.mock('superagent')

describe(['@utils/auth - When an AJAX response returns:'
].join('')
, function () {

  beforeEach(function () {
    window.location.href = 'http://quux.default.com'
    var queryString = require('query-string')
    queryString.__setMockParseReturns([{
      'access_token': '1234foo',
      'expires_in': '9999'
    }])
  })

  it(['should set a redirect token and goto platform ',
    'when the AJAX request returns 401.'
  ].join('')
  , function () {
    var superagent = require('superagent')
    superagent.__setMockAjaxResponses([
      [null, { 'status': 401 }]
    ])

    var href = window.location.href
    var auth = require('../index.js')
    auth.login(function (res) {})
    var Cookies = require('cookies-js')
    var config = require.requireActual('../config')
    expect(decodeURIComponent(window.location.href)).toBe([
      config.loginUrl,
      config.loginServiceLogin,
      '?client_id=',
      config.clientId,
      '&response_type=token',
      '&redirect_uri=',
      config.clientRedirectUri
    ].join(''))
    expect(Cookies.__getMockCookieData()[config.clientId + '_state_locationAfterLogin']).toBe(escape(href))
  })

And that test would pass. Since jsdom@8 this is no longer possible and these tests fail.

Seems like jsdom is looking at some type of capability, just wanted to make sure that Jest will pick up that capability when it is available.

[cpojer]

You are right, this is indeed a jsdom issue. At Facebook, what we have done to work around this, is use this:

Object.defineProperty(window.location, 'href', {
  writable: true,
  value: 'some url'
});

this works for us, however we are still on jsdom 7 internally.

I'll close this, as I believe the Object.defineProperty way of doing things is fine. If that doesn't work for you in jsdom 8, I'm happy to reopen it.

[sterpe]

Cool, thanks I will try this out.

[sterpe]

@cpojer, I can't seem to figure out what I need to click on to reopen this issue...

Is there anyway in jest environment for one to call jsdom.changeUrl(window, url) as described here https://github.com/tmpvar/jsdom#changing-the-url-of-an-existing-jsdom-window-instance in jest-cli@15.1.1?

[th3fallen]

old ticket but for those still having this issue we've started using window.location.assign() instead so in our tests we can mock the assign function like so..

it('will redirect with a bad route', () => {
    window.location.assign = jest.fn();
    const redirection = shallow(<Redirection />, {
      context: {
        router: {
          location: {
            pathname: '/wubbalubbadubdub',
          },
        },
      },
    });
    expect(window.location.assign).toBeCalledWith(`${CONFIG.APP_LEGACY_ROOT}`);
  });

[sterpe]

Thanks @th3fallen . That's cool!

[sterpe]

Btw @cpojer I start at FB on 1May.... ;P

[cpojer]

Nice!

[okovpashko]

I'm trying to migrate our tests from Mocha+Chai+Sinon.js to Jest and can't figure out how to change location for a particular test.
Jest 19.x uses JSDom 9.12 that does not allow to change location using Object.defineProperty trick. Also, I can't use jsdom.changeURL() because of the reasons described in jsdom/jsdom#1700.
@cpojer what about implementing some proxy method to jsdom.changeURL() in Jest?

[thymikee]

@okovpashko we're planning to expose jsdom to the environment: #2460

[cpojer]

Object.defineProperty works for us at FB.

[okovpashko]

@thymikee I saw that issue but thought that the proposition was rejected.
@cpojer I misread your example and mixed it up with other related to this problem, where people suggested to use Object.defineProperty(window, 'location', {value: 'url'});. Thank you!

I need to change not only the href, so I wrote simple method, that may be useful for someone who will read this thread:

const setURL = (url) => {
  const parser = document.createElement('a');
  parser.href = url;
  ['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(prop => {
    Object.defineProperty(window.location, prop, {
      value: parser[prop],
      writable: true,
    });
  });
};

[matt-dalton]

Apologies for dragging out this thread further, but I have tried mocking out push function as suggested...

reactRouterReduxMock.push = (url) => {
   Object.defineProperty(window.location, 'href', {
	writable: true,
	value: url
       })
})

but I'm still getting a jsdom error that I can't seem to get round:

       TypeError: Cannot read property '_location' of null
       at Window.location (/Users/user/projects/app/client/node_modules/jsdom/lib/jsdom/browser/Window.js:148:79)
       at value (/Users/user/projects/app/client/test/integration-tests/initialSetup.js:122:32) //this is the defineProperty line above

I realise this is a jsdom error, but for those who have solved this is there any more setup context you could share that might let me get round this?

Thanks