Categories
Vue Answers

How to mock window.location.href with Jest and Vue.js?

Spread the love

Sometimes, we want to mock window.location.href with Jest and Vue.js.

In this article, we’ll look at how to mock window.location.href with Jest and Vue.js.

How to mock window.location.href with Jest and Vue.js?

To mock window.location.href with Jest and Vue.js, we can mock the window.location property with our own values.

For instance, we write

global.window = Object.create(window);
const url = "https://example.com";
Object.defineProperty(window, "location", {
  value: {
    href: url,
  },
});
expect(window.location.href).toEqual(url);

to call Object.defineProperty with window and 'location' and an object with the value.href property to set window.location.href‘s value to the url.

We make a copy of window and assign it to global.window with

global.window = Object.create(window)

Conclusion

To mock window.location.href with Jest and Vue.js, we can mock the window.location property with our own values.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *