Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

25.1.0 issue with window.location.reload giving '...Cannot assign to read only property...' #9471

Closed
Obsiye opened this issue Jan 27, 2020 · 11 comments

Comments

@Obsiye
Copy link

Obsiye commented Jan 27, 2020

🐛 Bug Report

TypeError: Cannot assign to read only property 'reload' of object '[object Location]'

Reloading a page using Jest mocking is causing an issue with jest version 25.1.0

To Reproduce

import axios from 'axios'
jest.mock('axios')

const location_reload = window.location.reload
beforeAll(() => {
  Object.defineProperty(window.location, 'reload', { configurable: true })
  window.location.reload = jest.fn()
})
afterAll(() => { window.location.reload = location_reload })

beforeEach(() => jest.resetAllMocks() )

@antoinerey
Copy link

Note that location.reload is not the only property affected. location.href, location.assign… are all breaking with the latest jest-environment-jsdom update.

@SimenB
Copy link
Member

SimenB commented Jan 27, 2020

This matches browser behavior. You can try opening up an issue with JSDOM, but I doubt they'll diverge from browser behavior.

I recommend instead of using the browser global you create some sort of abstraction.

export function reload() {
  window.location.reload()
}

Then you can mock that module and replace reload with whatever you want.


Closing as this is working as intended and I don't think we can do anything about it in Jest. Feel free to continue discussing, though!

@SimenB SimenB closed this as completed Jan 27, 2020
@weelillad
Copy link

Courtesy of my colleague @jchiam, this allows me to mock window.location.assign:

    Object.defineProperty(window, 'location', {
      writable: true,
      value: { assign: jest.fn() }
    });

It might work for the other properties in window.location, too.

@kirillgroshkov
Copy link

What worked for me is:

Object.defineProperty(window, 'location', {
  writable: true,
  value: { assign: jest.fn() }
})

Object.defineProperty(window.location, 'reload', {
  writable: true,
  value: { assign: jest.fn() }
})

@P0ppoff
Copy link

P0ppoff commented Feb 26, 2020

I don’t understand why restoring the old function. I always do :

// GIVEN a mocked location
delete window.location
window.location = {
      reload: jest.fn()
}
// WHEN the method is called
method()
// THEN the page should have been reload
expect(window.location.reload).toHaveBeenCalledTimes(1)

In test environment, you don’t need to restore original window methods behaviour.

@joetidee
Copy link

joetidee commented Mar 5, 2020

When trying this:

Object.defineProperty(window.location, 'reload', {
  writable: true,
  value: { assign: jest.fn() }
})

I received the error:

TypeError: Cannot redefine property: reload
at Function.defineProperty ()

@wilf312
Copy link

wilf312 commented Apr 16, 2020

What worked for me is:

// location.assign
Object.defineProperty(window.location, 'assign', {
  value: jest.fn()
})
expect(window.location.assign).toHaveBeenCalledWith('/path/to/url')

// location.reload
Object.defineProperty(window, 'location', {
  value: { reload: jest.fn() }
})
expect(window.location.reload).toHaveBeenCalled()

Obsiye added a commit to ministryofjustice/laa-apply-for-legal-aid that referenced this issue Jun 23, 2020
The error was "TypeError: Cannot assign to read only property 'reload' of object '[object Location]'"

This is related to this issue jestjs/jest#9471

It is a workaround to fix the yarn test failure by mocking out window.location

This was caused when upgrading jest to version 26
Obsiye added a commit to ministryofjustice/laa-apply-for-legal-aid that referenced this issue Jun 23, 2020
The error was "TypeError: Cannot assign to read only property 'reload' of object '[object Location]'"

This is related to this issue jestjs/jest#9471

It is a workaround to fix the yarn test failure by mocking out window.location

This was caused when upgrading jest to version 26
Obsiye added a commit to ministryofjustice/laa-apply-for-legal-aid that referenced this issue Jun 23, 2020
The error was "TypeError: Cannot assign to read only property 'reload' of object '[object Location]'"

This is related to this issue jestjs/jest#9471

It is a workaround to fix the yarn test failure by mocking out window.location

This was caused when upgrading jest to version 26
@paullewisn
Copy link

Maybe helpful to some. The above examples will work if you execute them in a setupFilesAfterEnv script defined in .jestrc.

{
  ....
  "setupFilesAfterEnv": [
    "<rootDir>/config/jest/setupAfterEnv.js"
  ],
  ....
}

@carlosnufe
Copy link

I don’t understand why restoring the old function. I always do :

// GIVEN a mocked location
delete window.location
window.location = {
      reload: jest.fn()
}
// WHEN the method is called
method()
// THEN the page should have been reload
expect(window.location.reload).toHaveBeenCalledTimes(1)

In test environment, you don’t need to restore original window methods behaviour.

You have to restore it if a possible next test uses the variable, otherwise, the mocked value could bias on the result.

@chordmemory
Copy link

Just fyi for anyone landing here after google, using object assign stopped working, but this does (and it's a much simpler way of expressing it)

window.location = {
    ...window.location,
    reload: jest.fn()
}

bors bot added a commit to meilisearch/docs-searchbar.js that referenced this issue Jan 19, 2021
208: Update jest to remove node-notifier vulnerability r=bidoubiwa a=bidoubiwa

After update tests were failing until this hero solved it: jestjs/jest#9471

fixes #203

Co-authored-by: Charlotte Vermandel <charlottevermandel@gmail.com>
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests