用 Jest 模拟一个 React 组件

Question

问题 1

根据Jest docs，我们可以模拟一个React组件如下：

jest.mock('./Chart', () => () => 'Chart');

据我了解，第二个参数是一个函数，它返回一个呈现字符串的函数组件。为什么第二个参数是返回函数组件的函数（而不是简单的函数组件）？

问题 2

在现有的代码库中，我看到模拟是这样完成的：

jest.mock('./Chart', () => ({ Chart: 'mockChart' }));

在这种情况下，第二个参数是一个返回对象的函数组件。这里的意图是什么？在这种情况下，为什么我们没有返回函数组件的函数？函数组件返回对象的意图是什么？

Answer 1

第二个jest.mock参数是factory function。它应该返回一个用于模拟模块的值。

jest.mock('./Chart', () => () => 'Chart');

表示模块导出是用() => 'Chart'功能组件模拟的。

jest.mock('./Chart', () => ({ Chart: 'mockChart' }));

表示模块导出用{ Chart: 'mockChart' }对象模拟，即Chart命名导出用mockChart字符串模拟。