如何在玩笑中模拟 window.navigator.language 27

Question

我有一个像这样的函数

export function formatDate(date: string){
    return new Intl.DateTimeFormat(navigator.language).format(new Date(date))
}

我正在尝试用 vanilla jest 编写单元测试（不使用 jsdom 库），但正如你所看到的，我需要能够模拟window.navigator.language.

到目前为止我已经尝试过了

test('UK date format', () => {
  Object.defineProperty(window.navigator, 'language', {value: 'en-GB', configurable: true})
  expect(window.navigator.language).toBe('en-GB')
})

但我一生都无法理解你应该如何开玩笑地嘲笑 window.navigator 。

理想情况下，我希望能够在每次测试中模拟 window.navigator.language 的新值。这样我就可以进行测试en-US，fr一下

任何有助于理解您应该如何嘲笑这一点的帮助将不胜感激。

Answer 1

您可以window.navigator.language使用 Jest 进行模拟，如下所示：

let windowSpy: jest.SpyInstance;;

beforeEach(() => {
    // Spy on the read-only window function which
    // returns a reference to the current window.
    windowSpy = jest.spyOn(window, 'window', 'get');
});

// Clean-up the spy after every test
afterEach(() => windowSpy.mockRestore());

const setMockLanguage = (language: string) =>
    // Set how you want window.navigator.language to behave
    windowSpy.mockImplementation(() => ({
        navigator: {
            language
        }
    }));

test('UK date format', () => {
    setMockLanguage('en-GB');

    expect(window.navigator.language).toBe('en-GB');
});

test('US date format', () => {
    setMockLanguage('en-US');

    expect(window.navigator.language).toBe('en-US');
});

我在代码中添加了一些注释来提供帮助。

你可以在这里看到它的工作原理。