【问题标题】:Jest mock documentElement lang property开玩笑模拟 documentElement lang 属性
【发布时间】:2019-11-08 03:30:29
【问题描述】:

我正在尝试为我的测试操作 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 的情况下对其进行监视时,永远不会调用 spy。

编辑

我想要实现的更清晰的示例:

    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"

【问题讨论】:

    标签: javascript typescript unit-testing jestjs


    【解决方案1】:

    你快到了,但是当你访问document.documentElement.lang 属性时,get 访问器已被触发。所以你应该像下面这样定义那个对象;

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

    在你的测试中;

    在 expect 行之前,您应该添加此行以触发 getter 并调用 spy。

    window.document.documentElement.lang;
    

    编辑

    忘记上面的。

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

    创建一种将语言设置为常量的方法。然后测试该方法,而不是测试 documentElement 的get 操作。

    在调用您的方法之前,请使用以下代码设置 lang 属性。 (假设你有语言方法)

    test('should return `de` language when document has one specified', () => {
        Object.defineProperty(document.documentElement, 'lang', { value: 'de', configurable: true });
    
        expect(component.language()).toBe('de');
    });
    

    【讨论】:

    • 非常感谢您的回答。但这并不能完全解决我的问题。我需要更改 document.documentElement.lang 属性(请参阅编辑示例)
    • 我根据您的需要添加了编辑的代码。您可能需要在代码中进行小的重构,但这会有所帮助。
    猜你喜欢
    • 1970-01-01
    • 2017-07-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-05
    • 1970-01-01
    • 2020-10-20
    相关资源
    最近更新 更多