Question

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

文档显示我们应该使用React DOM来测试组件，但是在很多情况下，我们的逻辑组件会渲染另一个ui组件，也许逻辑组件中的函数将作为prop传递给ui组件，就像< / p>

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);

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

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

1 个答案: