react-test-renderer: findByType方法不适用于memo组件

s6fujrry  于 5个月前  发布在  React
关注(0)|答案(8)|浏览(82)

你想要请求一个功能还是报告一个bug?

功能

当前的行为是什么?

每当我尝试像这样操作时:

ReactTestRenderer.create(<SomeComponent />).root.findByType(SomeMemoComponent);

我得到以下错误: No instances found with node type: "undefined" 。我发现唯一能让它正常工作的方法是像这样引用 memo 组件的 type 属性:

ReactTestRenderer.create(<SomeComponent />).root.findByType(SomeMemoComponent.type);

我对这个解决方案感到满意,但流程会抱怨 type 不存在,所以我发现自己需要在各个地方用 $FlowFixMe 来修复这个问题。

预期的行为是什么?

我希望将 memo 组件传递给 findByType 能够正常工作。或者流程能够识别 memo 组件的 type 属性。我认为两者都应该可以,尤其是第一个选项。

这个问题影响了哪些版本的 React,以及哪些浏览器/操作系统?在之前的 React 版本中这个问题有解决过吗?

不,据我所知,它从未起作用过。

nhhxz33t

nhhxz33t1#

我认为这是一个错误,可能由 #17278 修复。

zy1mlcev

zy1mlcev2#

如果你调试结果树,memo组件不存在,只有它 Package 的组件。我相信这是设计好的?因为树是“协调”的树。需要进一步调查。
编辑:在v16.12上进行了测试。上面的PR没有解决这个问题。

m4pnthwp

m4pnthwp3#

@milesj的确,v16.12没有解决这个问题。如果findByType不能与备忘录组件一起工作,那么我希望流程至少能识别备忘录组件的type属性。

hjqgdpho

hjqgdpho4#

我已经为那些需要它的人找到了一个解决方法。
react , react-dom , react-test-renderer 固定到 16.11.0 上,最重要的是给 react-is@16.11.0 添加一个依赖项。

yyyllmsg

yyyllmsg5#

我遇到了同样的问题。我发现,如果定义了 SomeMemoComponent.defaultProps ,它确实能按预期工作。看起来在构建树时,MemoComponentSimpleMemoComponent 之间存在一些区别。

iugsix8n

iugsix8n6#

同样遇到这个问题。@henryqdineen 我尝试定义了 defaultProps ,但对我来说没有帮助。

camsedfj

camsedfj7#

请查看我在#17700(评论)上的评论。

l3zydbqr

l3zydbqr8#

我最终创建了自己的测试 predicate ,直到这个问题得到解决:

const MyComponent = () => (<div />);
const MemoMyComponent = React.memo(MyComponent);

const elementByType = (type) => (element) => (
  element.type === type // Match non-memo'd
  || element.type === type.type // Match memo'd
);

const rendered = renderer.create((
  <MyComponent />
));

rendered.root.find(elementByType(MyComponent)) 

const renderedWithMemo = renderer.create((
  <MemoMyComponent />
));

renderedWithMemo.root.find(elementByType(MemoMyComponent))

相关问题