在被测组件内模拟一个函数 Reactjs

【问题标题】：Mocking a function inside a component under test Reactjs在被测组件内模拟一个函数 Reactjs
【发布时间】：2021-12-23 18:32:43
【问题描述】：

我们可以模拟一个写在 Reactjs 中被测组件内部的函数吗？

【问题讨论】：

我认为这可以帮助你stackoverflow.com/questions/43500235/…
感谢@AmirhosseinRahmati 的回复。我已经看过这个了，但这对我没有帮助。
我不认为你可以模拟在反应组件中编写的函数。您必须在外部对其进行重构以模拟它。
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： reactjs jestjs enzyme react-testing-library

【解决方案1】：

你不能直接模拟一个函数，但有一些方法可以让它工作。您可以在 props 中传递函数并调用它，而不是使用原始函数。

例如

const MyComponent = () => {
   const myFunction = () => {
      // Your code here
   };
   // rest of the code
}

你可以把它变成

const MyComponent = ({myMockedFunction}) => {
   const myFunction = myMockedFunction || (() => {
      // Your code here
   });
   // rest of the code
}

其他方法包括在外部重构函数，以便您可以直接使用 jest.mock。

【讨论】：