开玩笑的模拟documentElement lang属性

时间:2019-06-26 08:31:39

标签: javascript typescript unit-testing jestjs

我正在尝试为测试操作documentElement lang属性。 而且无法弄清楚我该怎么做到。我已经尝试过在Jest配置中定义setupFiles,这给了我定义它的可能性,并且没有为其他测试更改它的选项-如此处所述:Mocking `document` in jest

部分测试代码如下:

const lang: string = document.documentElement.lang ?
      document.documentElement.lang : Constraints.DEFAULT_LANGUAGE;

测试如下:

   test('should pass `en` language when document hasn`t any specified', () => {
    const spy = jest.spyOn(window.document, 'documentElement', 'get');
    expect(spy).toHaveBeenCalled();
  });

并带有 setupFiles

Object.defineProperty(document, 'documentElement', {
    writable: true,
    configurable: true,
    value: document.createElement('document')
});

当我有setupFiles时,出现错误: Property documentElement does not have access type get

但是当我尝试在未配置setupfile.js的情况下进行监视时,永远不会调用间谍。

编辑

更清晰的示例说明我要实现的目标:

    const lang: string = document.documentElement.lang ?
      document.documentElement.lang : Constraints.DEFAULT_LANGUAGE;
    component.src = `/${lang}/mysite`;
test('should pass `de` language when document has one specified', () => {
    const spy = jest.spyOn(window.document, 'documentElement', 'get');
    const mockElement = document.createElement('document');
    mockElement.lang = 'de';
    spy.mockReturnValue(mockElement);
    expect(component.src).toContain('/de/');
  });

在测试中,我得到:

expect(received).toContain(expected) // indexOf

    Expected substring: "/de/"
    Received string:    "http://localhost/en/mysite"

1 个答案:

答案 0 :(得分:1)

好吧,您几乎可以到那里,但是当您访问@mixin query-print { @media print { @content; } @at-root.body.is-pdf-mode #{&} { @content; } } 属性时,将触发get访问器。因此,您应该像下面那样定义该对象;

@media print {
  .box {
    background: green;
  }
}

.body.is-pdf-mode .box {
  background: green;
}

在测试中;

在期望行之前,您应该添加此行以触发getter并使间谍被调用。

document.documentElement.lang

编辑

忘记上面的内容。

只需删除您的设置代码块,我就不需要间谍或其他东西。

创建一种将语言设置为常量的方法。然后测试该方法,而不是测试documentElement的Object.defineProperty(document, 'documentElement', { configurable: true, get () { return document.createElement('document'); }, }); 操作。

在调用方法之前,请使用下面的代码来设置lang属性。 (想象一下您有语言方法)

window.document.documentElement.lang;