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

Question

I have the following rendered HTML from my React component

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

What I want to assert on is that the array inside the items element contains the correct list, ie just "JK"

I have tried

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

But this doesn't work. How can I do this assertion?

UPDATE: In fact even just checking for the presence of Blueprint2.Select fails

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

Even though I have generated a snapshot and can see the above HTML in it. Is there a different convention for checking an element with a two part name (separated by a dot)?

Answer 1

You should break your complicated statement into multiple statements, just like in any other programming:

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

The key to writing an expect for the array is to realize that they are passed in as props. So you can extract the prop you want directly:

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

Or if you want to expect the value of more than one prop:

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