如何在使用钩子的反应 SFC 中测试功能？答案

【问题标题】：How to test function in a react SFC which using hooks?如何在使用钩子的反应 SFC 中测试功能？
【发布时间】：2019-07-01 02:24:03
【问题描述】：

https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks

文档显示我们应该使用React DOM来测试组件。但是在很多情况下，我们的逻辑组件会渲染另一个ui组件。并且可能逻辑组件中的函数会作为prop传递给ui组件，就像

function Foo(){
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  function onChange(value) {
    setCount(value);
  }
  return <Bar value={count} onChange={onChange} />
}

function Bar(props){
  const { value, onChange }  = props;
  return (
    <div>
      <p>You clicked {value} times</p>
      <button onClick={() => onChange(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这种情况下，如何测试onChange()等在DOM中无法获取的功能呢？这是最简单的情况。如果我们使用一些像material-design和ant-design这样的组件库，我们通常不知道DOM结构。

【问题讨论】：

在这种情况下，你只需在p 标签中添加一个id .. 但我不知道你是否使用material-ui

标签： javascript reactjs react-hooks

【解决方案1】：

按照文档的建议：

如果您的测试解决方案不依赖 React 内部，那么测试带有 Hooks 的组件不应与您通常的不同测试组件。

目标根本不是测试onChange 函数，钩子是否工作已经由 React 团队测试。

您当前对渲染组件的更改根本不会更改测试，无论组件链有多深，渲染Foo 仍会渲染button 和p。

在使用像Antd 或Material Design 这样的框架时，可能很难知道完整的DOM 结构。但是，或者更好的是，您可以通过用户在您的页面上看到的内容进行查询。

例如。使用文档中推荐的React testing library：

const button = getByText(container, /Click Me/i);

这与用户在页面上看到的内容直接相关，并导致更好的测试。

【讨论】：

有时一个函数会调用其他函数并带有一些参数。在扩展 React.Component 的组件中，我可以预期是否使用指定的参数调用了组件的其他函数。所以当我重构我的组件时，我可以确定组件是否像以前一样工作。但是现在，我只能知道DOM的变化？测试不仅是UI，还有逻辑。
是的，测试实现细节是recipe for brittle tests，更改参数、状态名称不会导致用户更改，它只会导致更多的测试重构。而是测试用户直接与之交互的内容
例如，antd 的Table 组件可以接受pagination 和onChange() 属性来渲染表格下的分页并在更改页码时调用onChange。如果我的组件渲染表，我如何调用定义在我的组件内部的函数并传递给表？也许在某些版本之后，DOM 结构发生了一些变化，以至于我无法像以前一样找到目标元素来发出它的onClick。跨度>
最简单的方法是问问自己用户会怎么做？，用户会点击一个带有数字的按钮/链接，然后等到它显示一个页面将该号码设为活动状态
关于版本后DOM结构的变化，就像我提到的那样，您可以通过按钮具有的文本获取，这样您就不必知道DOM结构。这很重要，因为这是用户看到的