酶：如何测试浅组分的相互作用

Question

我想测试一些与我的列表组件的基本UI交互。

我想测试，使用带有浅根对象的Enzyme + Jest，给定'select all'复选框可以正常工作。

事先，我验证，没有选择任何东西。这确实很有效：

<input type=submit name=OK  value="button"/>

但我无法在该主复选框上触发“点击”（或“更改”）...

const allBox = list.find('Checkbox.select-all')
expect(allBox.prop('checked')).toBe(false)
mainRows.find('Checkbox').forEach( (node) => {
    expect(node.prop('checked')).toBe(false)
})

我怀疑，因为Checkbox仍然是浅层allBox.simulate('click')` 而不是实际的html-ish <Checkbox>。

但我该怎么办？

安装（实际渲染）整个列表组件将变得非常庞大。我可以以某种方式挂载（相当小）Checkbox子组件，然后触发其事件？和/或我需要.dive()吗？

<input type='checkbox'…>之前的所有其他内容现在都被选中了吗？

各种expect()的{​​{1}} - 属性与组件状态相关联。那么我需要checked吗？甚至是<Checkbox>？ →有some discussion on the Enzyme tracker，有更多/如何.update（）有效...

无论如何，对我来说没有运气：

list.instance().update()

Answer 1

'更改'，而非'点击'

嗯，首先，我必须模拟'更改'，而不是'点击'。由于<Checkbox>组件的所有浅度只有更改 - 处理程序。 （那个点击会导致改变只是真的，如果它变成了实际的html ...... sinca就是<input type="checkbox…>做的那样）

现在核心问题：

  

list.find（ '列表bottombar '）。找到（' Checkbox.select-所有'）。调试（）

<Checkbox className="select-all" checked={false}…

让我们触发改变：

  

list.find（ '列表bottombar '）。找到（' Checkbox.select-所有 '）。模拟（' 变更'）

我们做得好吗？

  

list.find（ '列表bottombar '）。找到（' Checkbox.select-所有'）。调试（）

是！

<Checkbox className="select-all" checked={true}…

使用速记会显示同样的事情吗？

  

bottomBar.find（ 'Checkbox.select-所有'）。调试（）

<Checkbox className="select-all" checked={false}…

不！所以@konekoya是对的，您必须通过查找继续检索，不允许先前的缩写。 （嗯。哈。这是文档中的任何地方吗？！？）

[强制]更新有帮助吗？ （剧透：没有。）

  

bottomBar.update（）

Error: ShallowWrapper::update() can only be called on the root

很好，然后

  

list.update（）   bottomBar.find（ 'Checkbox.select-所有'）。调试（）

<Checkbox className="select-all" checked={false}…

没有运气。

  

list.instance（）。更新（）   TypeError：list.instance（...）。update不是一个函数   list.instance（）。forceUpdate（）   bottomBar.find（ 'Checkbox.select-所有'）。调试（）

<Checkbox className="select-all" checked={false}…

（虽然仍然会检查该框，但上面的长查询仍会验证）

Dive也没有帮助。

TL;博士;旧列表的任何快捷方式都只是废弃数据的快捷方式。一次必须从根元素find()一次又一次。

P.S。来自酶quite explicitly confirms this的知情人士

  

在v2中使用.find时，会得到一个自动更新的包装器   当根包装器更新时。在v3中，它是不可变的，所以你必须这样做   从根本上重新找到反映的变化。