reactjs - 使用 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 字符串模拟的。