0

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

文档显示我们应该使用 React DOM 来测试组件。但是在很多情况下，我们的逻辑组件会渲染另一个 ui 组件。并且可能逻辑组件中的函数会作为道具传递给 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结构。

4

1 回答 1

0

正如文档所建议的：

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

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

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

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

例如。使用文档中推荐 的React 测试库：

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

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

于 2019-07-01T05:06:18.877 回答