如何在 Jest/Enzyme 中断言元素“数组属性”？

Question

我的 React 组件有以下呈现的 HTML

<Blueprint2.Select
        disabled={false}
        filterable={false}
        itemRenderer={[Function]}
        items={
          Array [
            "JK",
          ]
        }
        onItemSelect={[MockFunction]}
      >

我要断言的是 items 元素内的数组包含正确的列表，即只是“JK”

我试过了

expect(wrapper.find("Blueprint2.Select").find("[items=['JK']").exists()).toEqual(true);  

但这不起作用。我该如何做这个断言？

更新：事实上，即使只是检查 Blueprint2.Select 的存在也会失败

expect(wrapper.find("Blueprint2.Select").exists()).toEqual(true);  

即使我已经生成了一个快照并且可以在其中看到上面的 HTML。检查具有两部分名称（由点分隔）的元素是否有不同的约定？

Answer 1

您应该将复杂的语句分解为多个语句，就像在任何其他编程中一样：

const expectedItems = ["JK",]
const component = wrapper.find("Blueprint2.Select");
expect(component.exists()).toBeTruthy();

为数组编写 expect 的关键是要意识到它们是作为 props 传入的。所以你可以直接提取你想要的道具：

expect(component.props().items).toEqual(expectedItems);

或者，如果您希望获得多个道具的价值：

expectedProps = {
    items: ['JK',],
    disabled: false,
    filterable: false,
}
expect(compoennt.props()).toMatchObject(expectedProps);