如何在使用钩子的react SFC中测试功能？

Question

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

文档显示我们应该使用React DOM来测试component.But在很多情况下，我们的逻辑组件呈现另一个ui component.And可能逻辑组件中的函数会作为一个属性传递给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结构。

Answer 1

正如文档所建议的：

如果您的测试解决方案不依赖于React内部，那么使用钩子测试组件应该与您通常测试组件的方式没有什么不同。

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

您当前对呈现组件所做的更改根本不会更改测试，无论组件链深入到什么程度，呈现Foo仍然会呈现button和p。

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

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

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

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