如何模拟具有复杂逻辑的 React 组件答案

【问题标题】：How to mock a React Component with complicated logic如何模拟具有复杂逻辑的 React 组件
【发布时间】：2020-05-04 12:13:22
【问题描述】：

我正在使用一个第三方 React 组件，它被证明真的很难测试。这是我的组件外观的示例。

import { ThirdPartySelect } from 'thirdPartyComponents'
function Select() {
  /* Lots of complicated logic */
  ...
  const [name, changeName] = useState('First Name')
  const options = [
    'First Name',
    'Second Name',
    'First Name',
  ]

  function handleChange(event) {
    changeName(event)
  }

  return (
   <ThirdPartySelect onChange={handleChange()} options={options} value={name}/>
  )
}

事实证明，这真的很难测试，因为 Select 组件实际上就像 4 个 HTML 元素，很难确定触发哪个元素。环顾四周，似乎this guy 对如何解决问题有一个很好的解决方案。他模拟了该组件并使其只有 HTML 组件，这使得更改变得更加容易。

我现在遇到的问题是显示的代码很容易被模拟，但是当它说

/* Lots of complicated logic */

大约有 100 行代码，因为该组件使用的是 React-Redux，这让事情变得非常混乱。

理论上，我可以将所有 Redux 逻辑添加到 mock 中，但我认为它可能会在组件本身的某个时刻发生更改，这也需要我在 mocked 组件中进行更改，并且可能会变得非常混乱。

这是我的问题：有没有办法只模拟我在示例中展示的简单 React 组件，而不必添加 redux 逻辑，但仍然能够包含 redux模拟组件中的逻辑？还是我必须在物理上编写出我想添加到模拟组件的任何内容？

我想要包含 Redux 逻辑的原因是因为那是我真正想要测试的内容。

对不起，如果这个问题听起来有点幼稚，我是 Jest 的新手，很难理解一切是如何运作的。

【问题讨论】：

什么是“很多复杂的逻辑”？这对我来说是一个标志，它应该被分解为一个实用函数，（a）很容易单独测试，（b）以后很容易模拟。另外，希望您并不是说您实际上是在对第三方代码进行单元测试，而只是让您的组件难以测试。
我不是在测试第三方代码，只是让我的方法更难测试。话虽如此，你认为我应该把所有的 Redux 代码放在一个实用函数中吗？我会调查的。看起来它可能有点复杂，但也许这是构建我的组件的更好方法
你的组件代码in有什么样的redux代码？我假设的 Redux 钩子？你介意在这里分享你的组件代码吗？可能能够指出易于提取的功能。
所以我有 redux 钩子，但我也有一些 useEffect 函数，因为我的组件从服务器获取信息，有时需要对其进行解析。所以使用 Redux 钩子中的解析和监听器钩子，它变得很多

标签： reactjs unit-testing react-redux mocking jestjs

【解决方案1】：

这似乎没有太大的吸引力。我意识到，尽管我在组件中有很多逻辑，但其中大部分是当一个动作发生并影响这个组件时发生的事情，而不是当这个组件发生变化时发生的事情。

出于这个原因，我决定只使用组件更改时触发的少量逻辑来模拟组件。这不是我担心的 100 行逻辑。

除此之外，我在动作的接收端使用常规组件。这样做的原因是，与触发操作相比，确定组件是否发生了什么事情要容易得多。

【讨论】：