不能用 jasmine/karma 和 typecpript 模拟“窗口”答案

【问题标题】：Cannot mock "window" with jasmine/karma and typescpript不能用 jasmine/karma 和 typecpript 模拟“窗口”
【发布时间】：2020-01-09 20:53:54
【问题描述】：

我正在尝试在 jasmine/karma 单元测试中模拟“窗口”对象。我已经尝试了几乎所有的解决方案，但没有任何帮助。

最简单的：

const mockWindow: any = () => {
            return {
                navigator: {
                    userAgent: "Edge"
                }
            };
        };

//in some test
window = mockWindow();

错误：TypeError：试图分配给只读属性。（第 25 行）“茉莉花”

另一个：

class MockWindow {
        public navigator =  { userAgent: "Edge" };
    }

//in some test
window = new MockWindow() as any;

错误：TypeError：试图分配给只读属性。（第 25 行）“茉莉花”

使用defineProperty：

Object.defineProperty(navigator, "userAgent", {
                value: () => "Edge",
                configurable: true,
                writable: true
            });

如您所见，我也尝试过使用“可配置”和“可写”等属性的解决方案。

错误：TypeError：尝试对不可配置属性的可配置属性。（第 25 行）“茉莉花”

使用茉莉模拟：

spyOn<any>(window, "navigator").and.returnValue({ userAgent: "Edge" });

它运行没有错误，但没有模拟窗口。 5. 棘手的一：

window.navigator['__defineGetter__']('userAgent', function(){
    return 'Edge';
  });

错误：TS7053：元素隐式具有“任何”类型，因为“defineGetter”类型的表达式不能用于索引类型“导航器”。
类型“Navigator”上不存在属性“defineGetter”。

我确信一定存在某种解决方案。我记得在另一个项目中做了同样的模拟，一切都很好。也许我必须在 karma/jasmine/typescript 配置中添加一些配置属性。

请帮忙！）

【问题讨论】：

标签： javascript typescript jasmine karma-jasmine karma-webpack

【解决方案1】：

window 对象包含大部分环境，因此对其进行核对不是一个好主意。我认为您实际上想要做的是覆盖浏览器 userAgent 字符串。

如果你跑：

Object.getOwnPropertyDescriptor(window.navigator, 'userAgent');
// {"writable":false,"enumerable":false,"configurable":false}

您看到该属性不可配置或不可写。这就是它无法覆盖它的原因。

不过，你可以试试：

navigator.__defineGetter__('userAgent', function () { return 'Edge'; });

谨慎使用它，因为它已被弃用。 Object.prototype.defineGetter()

从 2020 年 2 月起，您可以在 Chrome DevTools 中更改报告的 userAgent 字符串。

【讨论】：