您是否要请求功能或报告错误?
我想报告一个错误。
目前的行为是什么?
当前,当有效的功能组件传递给TestUtils.renderIntoDocument时,它将返回null且不引发错误。
演示版
此行为已在沙箱中复制: https :
检查控制台,以查看准备好的示例组件的TestUtils.renderIntoDocument输出。
解决方法
同时满足SFC和FC要求的解决方法是将组件包装到容器中:
const FCCounter = () => {
const [count, setCount] = useState(0);
return (
<div>
<div>{count}</div>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};
TestUtils.renderIntoDocument(
<div>
<FCCounter />
</div>
);
预期的行为是什么?
哪个版本的React受此问题影响?
反应版本:16.8.6
功能组件没有任何instances
,那么您会期望什么
TestUtils.renderIntoDocument(<FCCounter/>)
返回?
另外,从广义上讲,您能解释一下您要做什么吗? 您可以使用forwardRef
/ useImperativeHandle
(https://reactjs.org/docs/hooks-reference.html#useimperativehandle)来访问内部“方法”,但我很好奇您正在尝试进行测试。
在使用经典组件调用TestUtils.renderIntoDocument
,我完全可以访问它的state
, props
并使用setState
操作该组件。 因此,我期望TestUtils.renderIntoDocument
返回的对象是允许我使用state
, props
和setState
。
我正在尝试测试作为功能组件实现的组件。 主要目的是更改组件的状态,并检查更改后的状态是否与测试期望的状态匹配。
在进行测试的情况下,我有一个先决条件,即应按原样测试组件,并且不得更改组件以包含专门用于测试目的的代码。 因此,将组件本身更改为使用forwardRef/useImperativeHandle
并不是一种选择。
@DeividasBakanas函数组件没有实例。 您可以触发按钮,这将通过调度事件来更新状态。 在我看来,这是比尝试强制更新TestUtils.renderIntoDocument
返回的实例(对于类组件)更好的方法。
就像提到的@trueadm一样,我们不建议您测试组件本身的实现细节,不建议使用props / events触发更新,并对组件输出进行断言。 我可以推荐像react-testing-library https://github.com/kentcdodds/react-testing-library之类的库,以使其变得更容易。 肯特还将就该主题撰写大量文章,并予以推荐。
解决此问题,因为它更多是使用问题,而不是错误/功能请求。