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

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

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

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');
});

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

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

How to mock window.navigator.language in jest 27

unit-testing

navigator

typescript

jestjs

ts-jest