织梦狗教程 / 编程问答 / 前端问题 / 正文

如何用 Jest + Vuejs 模拟 window.location.href?

织梦狗教程前端问题

2022-01-01

How to mock window.location.href with Jest + Vuejs?(如何用 Jest + Vuejs 模拟 window.location.href?)

本文介绍了如何用 Jest + Vuejs 模拟 window.location.href?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前，我正在为我的项目实施单元测试，并且有一个包含 window.location.href 的文件.

Currently, I am implementing unit test for my project and there is a file that contained window.location.href.

我想模拟这个来测试，这是我的示例代码:

I want to mock this to test and here is my sample code:

it("method A should work correctly", () => {
      const url = "http://dummy.com";
      Object.defineProperty(window.location, "href", {
        value: url,
        writable: true
      });
      const data = {
        id: "123",
        name: null
      };
      window.location.href = url;
      wrapper.vm.methodA(data);
      expect(window.location.href).toEqual(url);
    });

但我收到此错误:

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

我尝试了一些解决方案，但没有解决.我需要一些提示来帮助我摆脱这个麻烦.请帮忙.

I had tried some solutions but not resolve it. I need some hints to help me get out of this trouble. Plz help.

推荐答案

你可以试试:

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

查看该问题的 Jest Issue:
笑话问题

Have a look at the Jest Issue for that problem:
Jest Issue

这篇关于如何用 Jest + Vuejs 模拟 window.location.href?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！