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

sterpe · 2016-04-13T18:05:37Z

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 [email protected]/[email protected] 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.

The text was updated successfully, but these errors were encountered:

cpojer · 2016-04-14T00:20:20Z

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 · 2016-04-14T00:33:08Z

Cool, thanks I will try this out.

sterpe · 2016-09-30T23:03:44Z

@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 [email protected]?

th3fallen · 2017-04-20T22:13:19Z

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 · 2017-04-20T22:53:56Z

Thanks @th3fallen . That's cool!

sterpe · 2017-04-20T22:54:27Z

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

cpojer · 2017-04-21T00:40:53Z

Nice!

okovpashko · 2017-05-02T09:35:10Z

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 · 2017-05-02T09:36:50Z

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

cpojer · 2017-05-02T09:41:19Z

Object.defineProperty works for us at FB.

okovpashko · 2017-05-02T10:19:42Z

@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 · 2017-05-13T16:07:59Z

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

th3fallen · 2017-05-13T16:12:39Z

@matt-dalton try my suggestion in #890 (comment) works well for me

ianlyons · 2017-05-13T22:44:24Z

@matt-dalton what's your URL? do you have testURL set in your jest-config.json or does it initialize as about:blank?

matt-dalton · 2017-05-16T08:10:32Z

@ianlyons Yeah I set value of "https://test.com/" for this in the package.json, and none of the paths are showing up as blank.

@th3fallen If I understand you correctly, I don't think this works for my use case. Are you passing the url as a context value that causes assign to be triggered? I am trying to put together a rudimentary integration test, so I want to check how the router responds to the initial data load. I have mocked the API response, and then need the URL change to take place using the app logic (i.e. I do not want to trigger it externally myself).

msholty-fd · 2017-11-10T16:04:56Z

Object.defineProperty seems to do the trick for testing functionality that relies on window.location.search, for instance. That being said it mutates window.location.search so other tests may be impacted. Is there a way to "undo" the changes you've made on window.location.search via Object.defineProperty, kinda like jest mock functions have the mockReset function?

dmgawel · 2017-11-28T16:29:52Z

@msholty-fd you could try this approach:

const origLocation = document.location.href;
let location = origLocation;

beforeAll(() => {
  const parser = document.createElement('a');
  ['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(prop => {
    Object.defineProperty(window.location, prop, {
      get: function() {
        parser.href = location;
        return parser[prop];
      }
    });
  });
});

afterEach(() => {
  location = origLocation;
});

test('location 1', () => {
  location = "https://www.google.com/";
  console.log(document.location.href); // https://www.google.com/
});

test('location 2', () => {
  console.log(document.location.href); // about:blank
});

modestfake · 2017-12-18T22:47:10Z

It stopped working in Jest 22.0.1

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

Error message:

TypeError: Cannot redefine property: href
        at Function.defineProperty (<anonymous>)

SimenB · 2017-12-18T22:59:58Z

Hmm, we might need to somehow allow people to call reconfigure. https://github.com/tmpvar/jsdom/blob/05a6deb6b91b4e02c53ce240116146e59f7e14d7/README.md#reconfiguring-the-jsdom-with-reconfiguresettings

simon360 · 2017-12-18T23:18:54Z

Opened a new issue related to this, since this one was closed: #5124

quantizor · 2017-12-19T22:18:15Z

@SimenB I'm not convinced that Jest should fix this. JSDOM should allow window.location.assign() to work as intended and reconfigure the output of window.location.href etc.

bchenSyd · 2018-01-15T03:51:11Z

I got TypeError: Could not parse "/upgrades/userlogin?hardwareSku=sku1351000490stgvha" as a URL because jsdom has base url default to about:blank

I tried to assign a base url to jsdom, spent 4 hours on it without sucess (I know how to do it, just insert <base href='your_base_url' /> to the dom; but, the dom is created by jest , not by me, so i gave up.

the Object.defineProperty solution only works with old ver of jsdom (you get an 'cannot redefine property error with later version of jsdom);
if you are using jsdom ver > 10, as @th3fallen mentioned is the right solution.
use window.location.assign is the right way to go

SimenB · 2018-01-15T07:34:59Z

If you just want some other url than about:blank, you can use testURL config.

bchenSyd · 2018-01-15T13:18:28Z

thanks @SimenB for your reply.

No I was talking about base url not url. I have code that will do window.location.href="/login" and when running jest, jsdom throw exception complaining /login is not a valid url

TypeError: Could not parse "/login" as a URL

I checked the source code of jsdom and realised this is because I don't have a base url setup ( this is equivalent of typing "/login" in browser URL bar without a base address).

with jsdom, normally we can set up base url via

global.jsdom = new JSDOM('<html><head> <base href="base_url" /></head></html>')

but because jest set up jsdom , it is beyond our control.
--- update: I suppose I can explicitly add jsdom as dependency and configure jsdom manually. but I'm not sure if it's the recommended way to do it

I then found a solution which is to substitute window.location.href= with window.location.assign and mock assign function and it worked for me

simon360 · 2018-01-15T13:30:40Z

@bochen2014 this issue has more information on how to use the newer version of jsdom: #5124

tl;dr: you can mock window.location.assign(), or you can use the jest-environment-jsdom-global, which will allow you to reconfigure jsdom in flight.

bchenSyd · 2018-01-15T13:37:25Z

thanks @simon360

that's what I did ;-)
I used jsdom.reconfigure to setup different initial urls in my tests, and whenever I need to change url in code (not test), I use window.location.assign and mocked it. which worked for me.

just for people who may/will run into the same issue, to set the url for your jsdom

// jest.config.js
 module.exorts={ 
  testURL: 'http://localhost:3000',
  // or : 
  testEnvironmentOptions: {
     url: "http://localhost:3000/",
    referrer: "https://example.com/",
  }
}

note that this will set url for all your tests;
if you want a different url in some particular tests, use jsdom.reconfigure api;
if you need to change url on the fly outside of unit test code (i.e. production code), you need to use window.location.assign and mock it.

petar-prog91 · 2018-02-16T14:06:45Z

Posted it on other ticket, but I'll post it here:

Found nice solution for Jest 21.2.1

Ok, so far the easiest solution around this is:
Go into your Jest settings (for example I'll use package.json):

"jest": { "testURL": "http://localhost" }

Now you will have access to window object and then you can set URL to whatever you like during tests.

it('Should set href url to testURL', () => {
    // Here I set href to my needs, opinionated stuff bellow
    const newUrl = 'http://localhost/editor.html/content/raiweb/it/news/2018/02/altered-carbon-best-cyberpunk-tv-series-ever.html';
    Object.defineProperty(window.location, 'href', {
        writable: true,
        value: newUrl
    });

    console.log(window.location.href);
});

it('Should set pathname url to testURL', () => {
    // Here I set href to my needs, opinionated stuff bellow
    const newUrl = '/editor.html/content/raiweb/it/news/2018/02/altered-carbon-best-cyberpunk-tv-series-ever.html';
    Object.defineProperty(window.location, 'pathname', {
        writable: true,
        value: newUrl
    });

    console.log(window.location.pathname);
});

Hopefully this helps someone.

dnutiu · 2019-03-19T17:15:10Z

In case you're getting this error when using Vue, just use this.$router.push({...}) instead of this.$router.go({...})

brianli-whitbread · 2019-03-27T00:40:05Z

Place the code below on line 1:
delete global.window.location;
global.window.location = "";

A click event that is changing the window.location can now be captured.

"jest": "^23.6.0"
<node.version>v10.15.0</node.version>
<npm.version>6.5.0</npm.version>

gaui · 2019-04-16T14:25:00Z

This works:

delete window.location;
window.location = Object.assign({}, window.location);
const url = Object.assign({}, new URL('http://google.com'));
Object.keys(url).forEach(prop => (window.location[prop] = url[prop]));

gaui · 2019-04-17T01:59:49Z

Or better yet...

delete (global as any).window;
(global as any).window = new JSDOM(undefined, { url: 'http://google.com' }).window;

GHLandy · 2019-06-12T12:55:33Z

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.

Yeah, I have some functions deal with location.search and location.hash, and I want to test it with defineProperty as you mentioned. It won't work!

When I turn off jest silent mode, I found this: Error: Not implemented: navigation (except hash changes)

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: navigation (except hash changes)
        at module.exports (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at navigateFetch (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:74:3)
        at exports.navigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:52:3)
        at LocationImpl._locationObjectNavigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:29:5)
        at LocationImpl.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:213:10)
        at Location.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/generated/Location.js:93:25)
        at Object.assign (/home/ghlandy/projects/wdph-utils/src/__tests__/url.test.js:6:14)
        at Object.asyncJestLifecycle (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>) undefined

And now I have no idea about how to test my funtions.

Anyone have any way to change the test url

GHLandy · 2019-06-12T13:02:20Z

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.
Yeah, I have some functions deal with location.search and location.hash, and I want to test it with defineProperty as you mentioned. It won't work!

When I turn off jest silent mode, I found this: Error: Not implemented: navigation (except hash changes)
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: navigation (except hash changes)
        at module.exports (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at navigateFetch (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:74:3)
        at exports.navigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/navigation.js:52:3)
        at LocationImpl._locationObjectNavigate (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:29:5)
        at LocationImpl.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/window/Location-impl.js:213:10)
        at Location.assign (/home/ghlandy/projects/wdph-utils/node_modules/jsdom/lib/jsdom/living/generated/Location.js:93:25)
        at Object.assign (/home/ghlandy/projects/wdph-utils/src/__tests__/url.test.js:6:14)
        at Object.asyncJestLifecycle (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (/home/ghlandy/projects/wdph-utils/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>) undefined
And now I have no idea about how to test my funtions.

Anyone have any way to change the test url

And In my situation, have a field testURL in jest.config.js file may works. But what if I want change testURL before each test.

jherax · 2019-06-14T23:18:33Z

I found this post to be very helpful: https://www.ryandoll.com/post/2018/3/29/jest-and-url-mocking

"In your Jest configuration, make sure to set the following:
"testURL": "https://www.somthing.com/test.html"
Then in your beforeEach() section for your test, change the path as needed by using
history.pushState().
window.history.pushState({}, 'Test Title', '/test.html?query=true');
Voila! Now you change out your path for any test, without having to override any jsdom configurations as others suggest in the thread mentioned above. Not sure on which thread I found this solution on, but kuddos to the dev that posted it!"

Excellent solution!!! Thank you very much! @Mike-Tran
I wanted a short and not invasive solution like this!

watadarkstar · 2019-06-28T17:11:55Z

To get this working as of June 2019 I had to do this:

    delete global.window.location;
    global.window = Object.create(window);
    global.window.location = {
      port: '123',
      protocol: 'http:',
      hostname: 'localhost',
    };

gaui · 2019-06-29T04:56:46Z

I use this....

window.history.pushState({}, '', `${url}/`);

studentIvan · 2019-07-09T15:04:15Z

Probably part of my JSDOMTestWrapper can help somebody

    /** @type {Window} */
    this.testWindowObject = Object.create(window);
    const wnd = this.testWindowObject;
    this.testWindowObject.history = {
      state: null,
      prev: { /** @todo immutable stack with the go(step) method emulation */
        state: null,
        pathname: null,
        search: null,
      },
      go(step) {
        logger.special('history go called', step);
        logger.warn('history go has not supported yet');
      },
      back() {
        this.state = this.prev.state;
        wnd.location.pathname = this.prev.pathname;
        wnd.location.search = this.prev.search;
        const eventData = this.state ? { url: this.state.displayURL, newState: this.state, type: 'push' } : null;
        wnd.sm.eventsService.triggerEvent(ROUTER_EVENTS.ROUTE_PUSH, eventData);
        wnd.sm.urlService.simpleRouteTo(`${ wnd.location.pathname || '' }${ wnd.location.search || '' }`);
        logger.special('history back emulated');
      },
      pushState(state, title, url) {
        this.prev.state = Object.assign({}, this.state);
        this.prev.pathname = '' + wnd.location.pathname;
        this.prev.search = '' + wnd.location.search;
        this.state = state;
        if (title) wnd.document.title = title;
        const [p, s] = url.split('?');
        wnd.location.pathname = p;
        wnd.location.search = s ? `?${ s }` : '';
        logger.special('push state emulated', { state, title, url });
      },
      replaceState(state, title, url) {
        this.prev.state = Object.assign({}, this.state);
        this.prev.pathname = '' + wnd.location.pathname;
        this.prev.search = '' + wnd.location.search;
        this.state = state;
        if (title) wnd.document.title = title;
        const [p, s] = url.split('?');
        wnd.location.pathname = p;
        wnd.location.search = s ? `?${ s }` : '';
        logger.special('replace state emulated', { state, title, url });
        logger.special('test: urlService.getPathName()', wnd.sm.urlService.getPathName());
      },
    };
    this.testWindowObject.innerWidth = WND_WIDTH;
    this.testWindowObject.innerHeight = WND_HEIGHT;
    this.testWindowObject.fetch = fetchFn;
    this.testWindowObject.localStorage = lstMock;
    this.testWindowObject.scrollTo = (x, y) => {
      /** not implemented yet https://github.com/jsdom/jsdom/issues/1422 */
      if (typeof x !== 'number' && (x.left || x.top)) {
        y = x.top;
        x = x.left;
      }
      // logger.info(`window.scrollTo(${ x }, ${ y })`);
    };

    if (fetchFn === JSDOMTestWrapper.FETCH_FN.DEV_MOCK) {
      global.Request = RequestMock;
      this.testWindowObject.Request = RequestMock;
    }

    if (href) {
      this.testWindowObject.location = Object.assign({}, this.testWindowObject.location, urlapi.parse(href));
    }
    else {
      this.testWindowObject.location = Object.assign({}, this.testWindowObject.location);
    }

    (function(ELEMENT) {
      ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
      ELEMENT.closest = ELEMENT.closest || function closest(selector) {
          if (!this) return null;
          if (this.matches(selector)) return this;
          if (!this.parentElement) {return null}
          else return this.parentElement.closest(selector)
        };
      ELEMENT.getBoundingClientRect = ELEMENT.getBoundingClientRect || (() =>
        ({ bottom: WND_HEIGHT, height: WND_HEIGHT, left: 0, right: WND_WIDTH, top: 0, width: WND_WIDTH, x: 0, y: 0 }));
    }(Element.prototype));

    this.testWindowObject.getBoundingClientRect = () =>
      ({ bottom: WND_HEIGHT, height: WND_HEIGHT, left: 0, right: WND_WIDTH, top: 0, width: WND_WIDTH, x: 0, y: 0 });

    this.testWindowObject.__resizeListeners__ = [];
    this.testWindowObject.__resizeTriggers__ = {};
    this.testWindowObject._detectElementResize = {
      removeResizeListener: () => {},
    };

    this.testWindowObject.matchMedia = jest.fn().mockImplementation(query => {
      return {
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
      };
    });

    this.rftpr = () => {};
    this.mode = mode;
    this.renderFirstTimePromise = new Promise((resolve) => {
      this.rftpr = resolve;
    });

    this.marpr = () => {};
    this.mobileAppReadyPromise = new Promise((resolve) => {
      this.marpr = resolve;
    });

    if (mode === JSDOMTestWrapper.MODE.MOBILE_APP) {
      this.testWindowObject.navigator = Object.assign({}, this.testWindowObject.navigator, {
        language: storeKey,
        appVersion: '5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Mobile Safari/537.36',
        userAgent: 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Mobile Safari/537.36',
        vendor: 'Google Inc.',
      });

      global.intercom = {
        registerUnidentifiedUser: jest.fn(),
        registerForPush: jest.fn(),
      };
    }

    const XApp = mode ? MobileApp : App;
    const app = <XApp window={ this.testWindowObject } rftResolve={ this.rftpr } storeKey={ storeKey } apiHost={ apiVersion } forceMobileDetection={ mode } />;
    render(app, this.testWindowObject.document.body);

    if (mode === JSDOMTestWrapper.MODE.MOBILE_APP) {
      setTimeout(() => {
        this.testWindowObject.sm.deviceService.appRestorePathHasInit = this.marpr;
        this.testWindowObject.sm.deviceService.fireEvent(this.testWindowObject.document, 'deviceready');
      }, 200);
    }

idleherb · 2019-09-27T15:46:23Z

This approach works as of Sep 27, 2019: https://stackoverflow.com/a/54034379/1344144

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, "location", {
    value: {
       href: url
    },
    writable: true
});

Lyukx · 2019-11-27T02:09:08Z

Another solution works for me currently without writing jsdom:

Make sure you have set testURL in jest.config.js no matter the value:

// jest.config.js
'testURL': 'https://someurl.com'

In your test file:

window.history.pushState({}, 'Mocked page title', 'www.yoururl.com');

Learned from: https://www.ryandoll.com/post/2018/3/29/jest-and-url-mocking. Thansk to Ryan!

jeancatarina · 2019-12-04T20:55:58Z

not working for me:

TypeError: Assignment to read-only properties not allowed in strict mode

it("should save hash when history is not found", () => {
	const historyBkp = global.window.history;

	delete global.window.history;
	global.window.history = false;

	externalLoader.savePageURL(urlTraining);

	expect(window.location.hash).to.be.equal(`#page=${urlTraining}`);

	global.window.history = historyBkp;
	window.location.hash = "";
});

brianli-whitbread · 2019-12-04T20:58:21Z

not working for me:

TypeError: Assignment to read-only properties not allowed in strict mode

it("should save hash when history is not found", () => {
	const historyBkp = global.window.history;

	delete global.window.history;
	global.window.history = false;

	externalLoader.savePageURL(urlTraining);

	expect(window.location.hash).to.be.equal(`#page=${urlTraining}`);

	global.window.history = historyBkp;
	window.location.hash = "";
});

add this to the global file.

delete global.window.location;
global.window.location = "";

clearyandzap · 2020-01-22T03:31:28Z

This approach works as of Sep 27, 2019: https://stackoverflow.com/a/54034379/1344144
global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, "location", {
    value: {
       href: url
    },
    writable: true
});

I'm trying something similar, with location.assign, but seems this isn't working anymore.

dudenamedjune · 2020-01-22T21:58:39Z

this works for me on jest 24.9.0

 window.history.replaceState({}, 'Test Title', '/test?userName=James&userNumber=007');

clearyandzap · 2020-01-22T21:59:53Z

this works for me on jest 24.9.0

 window.history.replaceState({}, 'Test Title', '/test?userName=James&userNumber=007');

I had to make code async in order to get this to work because I was running code inside a promise.

so is working now 😃

golubvladimir · 2020-02-20T07:11:45Z

How to test chenge location in vuex action ?

async setForm({ rootState, state, commit, dispatch }, formData) {
          ....
          switch (answ.result.type) {
            ....
            case 'redirect':
              console.log(answ.data.url);
              window.location = answ.data.url;
              console.log({ location: window.location.href });
              break;
            default:
              break;

it('setForm - success, redirect', async done => {
      expect(window.location.href).toBe('https://www.google.ru/');

I have error:

    expect(received).toBe(expected) // Object.is equality

    Expected: "https://www.google.ru/"
    Received: "http://localhost/"

alanhe421 · 2020-05-23T04:06:24Z

this worked for me

    const location = JSON.stringify(window.location);
    delete window.location;

    Object.defineProperty(window, 'location', {
      value: JSON.parse(location)
    });

    Object.defineProperty(global.location, 'href', {
      value: 'http://localhost/newURL',
      configurable: true
    });

on jest version 23.6.0

what's the global?

where's the global definition?

jakeonfire · 2020-08-28T02:15:40Z

This worked for me.

delete global.window.location
global.window.location = { href: 'https://test-domain.com.br', ...anyOptions }

this creates a Location with all the original functionality, but it's mockable:

beforeAll(() => {
  const location = window.location
  delete global.window.location
  global.window.location = Object.assign({}, location)
})

vincentntang · 2021-01-23T01:19:00Z

I had a really hard time getting this to work. I had a list of pathnames that needed to be checked against the current user's pathname

describe('<GearMenuButton />', () => {
  const defaultProps = {
    label: 'Nav Menu Button'
  }

 it.only('should have Account username underlined if the URL pathname is in the list of URLs', () => {
    const props = { locationUrls: ['/home.aspx', '/another.path'], ...defaultProps}

    global.window = Object.create(window)
    const pathname = '/home.aspx'
    Object.defineProperty(window, 'location', {
      value: {
        pathname: pathname
      },
      writable: true
    })

    render(<GearMenuButton {...props} />)

    const button = document.querySelector('.class-of-interest--active')
    expect(button).toBeInTheDocument()
  })
 }

quisido · 2021-02-09T17:37:33Z

this creates a Location with all the original functionality, but it's mockable:

beforeAll(() => {
  const location = window.location
  delete global.window.location
  global.window.location = Object.assign({}, location)
})

In TypeScript 4.1.3, this (as well as all other suggestions to delete anything on window) gives me:

error TS2790: The operand of a 'delete' operator must be optional.

yogitabholwankar · 2021-04-29T06:09:10Z

@msholty-fd you could try this approach:

const origLocation = document.location.href;
let location = origLocation;

beforeAll(() => {
  const parser = document.createElement('a');
  ['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(prop => {
    Object.defineProperty(window.location, prop, {
      get: function() {
        parser.href = location;
        return parser[prop];
      }
    });
  });
});

afterEach(() => {
  location = origLocation;
});

test('location 1', () => {
  location = "https://www.google.com/";
  console.log(document.location.href); // https://www.google.com/
});

test('location 2', () => {
  console.log(document.location.href); // about:blank
});

I am facing the same issue and after trying the above solution ,getting 'cannot redefine window.href'

github-actions · 2021-05-30T00:16:49Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

cpojer closed this as completed Apr 14, 2016

PauloASilva mentioned this issue Dec 27, 2016

document URL parsing #2453

Closed

thymikee mentioned this issue Dec 28, 2016

Expose jsdom to global environment #2460

Closed

francoischalifour mentioned this issue Apr 8, 2019

fix(routing): apply windowTitle on first load algolia/instantsearch#3669

Merged

vvanpo mentioned this issue Dec 9, 2019

docs: direct assignment to global window properties not supported by jsdom #9287

Closed

Urigo mentioned this issue Mar 31, 2020

[Client Step 6.4] Urigo/WhatsApp-Clone-Tutorial#24

Closed

sanlouise mentioned this issue May 18, 2020

upgrade JSDOM to 15.2.1 department-of-veterans-affairs/vets-website#12704

Merged

4 tasks

phawxby mentioned this issue Jan 7, 2021

jest-environment-jsdom should export jsdom globally #11001

Closed

github-actions bot locked as resolved and limited conversation to collaborators May 30, 2021

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

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

Comments

sterpe commented Apr 13, 2016

cpojer commented Apr 14, 2016

sterpe commented Apr 14, 2016

sterpe commented Sep 30, 2016 • edited Loading

th3fallen commented Apr 20, 2017

sterpe commented Apr 20, 2017

sterpe commented Apr 20, 2017

cpojer commented Apr 21, 2017

okovpashko commented May 2, 2017 • edited Loading

thymikee commented May 2, 2017

cpojer commented May 2, 2017

okovpashko commented May 2, 2017 • edited Loading

matt-dalton commented May 13, 2017

th3fallen commented May 13, 2017

ianlyons commented May 13, 2017

matt-dalton commented May 16, 2017

msholty-fd commented Nov 10, 2017 • edited Loading

dmgawel commented Nov 28, 2017

modestfake commented Dec 18, 2017 • edited Loading

SimenB commented Dec 18, 2017

simon360 commented Dec 18, 2017

quantizor commented Dec 19, 2017

bchenSyd commented Jan 15, 2018 • edited Loading

SimenB commented Jan 15, 2018

bchenSyd commented Jan 15, 2018 • edited Loading

simon360 commented Jan 15, 2018

bchenSyd commented Jan 15, 2018

petar-prog91 commented Feb 16, 2018 • edited Loading

dnutiu commented Mar 19, 2019

brianli-whitbread commented Mar 27, 2019 • edited Loading

gaui commented Apr 16, 2019

gaui commented Apr 17, 2019

GHLandy commented Jun 12, 2019

GHLandy commented Jun 12, 2019

jherax commented Jun 14, 2019

watadarkstar commented Jun 28, 2019

gaui commented Jun 29, 2019

studentIvan commented Jul 9, 2019

idleherb commented Sep 27, 2019

Lyukx commented Nov 27, 2019 • edited Loading

jeancatarina commented Dec 4, 2019

brianli-whitbread commented Dec 4, 2019

clearyandzap commented Jan 22, 2020

dudenamedjune commented Jan 22, 2020 • edited Loading

clearyandzap commented Jan 22, 2020

golubvladimir commented Feb 20, 2020

alanhe421 commented May 23, 2020

jakeonfire commented Aug 28, 2020

vincentntang commented Jan 23, 2021

quisido commented Feb 9, 2021

yogitabholwankar commented Apr 29, 2021

github-actions bot commented May 30, 2021

sterpe commented Sep 30, 2016 •

edited

Loading

okovpashko commented May 2, 2017 •

edited

Loading

okovpashko commented May 2, 2017 •

edited

Loading

msholty-fd commented Nov 10, 2017 •

edited

Loading

modestfake commented Dec 18, 2017 •

edited

Loading

bchenSyd commented Jan 15, 2018 •

edited

Loading

bchenSyd commented Jan 15, 2018 •

edited

Loading

petar-prog91 commented Feb 16, 2018 •

edited

Loading

brianli-whitbread commented Mar 27, 2019 •

edited

Loading

Lyukx commented Nov 27, 2019 •

edited

Loading

dudenamedjune commented Jan 22, 2020 •

edited

Loading