用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' }对象进行模拟，即，名为{export的Chart字符串将使用mockChart字符串进行模拟。