我如何开玩笑地模拟 Date.toLocaleDateString？答案

【问题标题】：How do I mock Date.toLocaleDateString in jest?我如何开玩笑地模拟 Date.toLocaleDateString？
【发布时间】：2020-04-15 09:06:14
【问题描述】：

我的 React 组件中有这个代码片段，它最终会呈现一个 HTML：

new Date(createDate).toLocaleDateString()

我的本地机器和我们的构建机器设置了不同的语言环境，所以这个函数的结果是不连贯的。如您所料，单元测试在我的机器上通过，在构建机器上失败，反之亦然。

我想模拟“toLocalDateString”，以便它始终使用相同的语言环境，例如“en-US”，或者至少它总是返回相同的字符串。我们的测试框架是开玩笑的。我该如何实现这个目标？

我在我的 test.spec.js 中尝试了这个，但它根本没有任何效果：

Date.prototype.toLocaleDateString = jest.fn().mockReturnValue('2020-04-15')
expect(component).toMatchSnapshot()

我仍然在快照中得到相同的旧 toLocalDateString 实现，我的 mockReturnValue 没有被考虑在内。

【问题讨论】：

标签： javascript reactjs unit-testing jestjs

【解决方案1】：

我可能有点晚了，但希望它可以帮助某人

let mockDate;

beforeAll(() => {
  mockDate = jest.spyOn(Date.prototype, 'toLocaleTimeString').mockReturnValue('2020-04-15');
});

afterAll(() => {
  mockDate.mockRestore();
});

【讨论】：

如果你需要一个模拟实现怎么办？我的意思是，实施取决于实际日期？

【解决方案2】：

你能换行吗

new Date(createDate).toLocaleDateString()

在函数中，将其作为 prop 传递给组件，然后模拟它？

【讨论】：

我不能在同一个组件中定义函数并从渲染中调用它吗？为什么要将它作为父组件的道具传递？
我以为您正在对演示组件进行单元测试，唯一关心的是“确保显示值”。

【解决方案3】：

下面的代码对你有用吗？我用这种方式模拟日期对象。

const realDateToLocaleDateString = Date.prototype.toLocaleDateString.bind(global.Date);
const toLocaleDateStringStub = jest.fn(() => '2020-04-15');
global.Date.prototype.toLocaleDateString = toLocaleDateStringStub;

const date = new Date();
console.log(date.toLocaleDateString()); // returns 2020-04-15

global.Date.prototype.toLocaleDateString = realDateToLocaleDateString;

【讨论】：

我在运行测试时收到“在 Function.toLocaleDateString () 处调用不兼容的接收器函数 Date() { [native code] } Method Date.prototype.toLocaleDateString”。