Jest / Enzyme со стильными компонентами

Question

Я не могу на всю жизнь заставить Jest / Enzyme красиво играть со стилизованными компонентами.

У меня есть компонент, который я монтирую, который отфильтровывает список из 5 последних поставок.

  it("should have five shipments", () => {
    const wrapper = shallow(<LastFiveShipments shipments={dummyProps.shipments} />);
    wrapper.debug();
    const styledList = wrapper.find("styled.ul");
    expect(styledList).exists().to.equal(true);;
  })

const LastFiveShipments = ({shipments}) => {
  return (
    <StyledList>
      <h5>Last Five Shipments:</h5>
      {
          shipments.sort((a, b) => new Date(a.cargo_units[0].created_at) - new Date(b.cargo_units[0].created_at))
          .filter((shipment, index) => index < 5)
          .map((shipment, index) => <li key={index}>{shipment.reference}</li> )
      }
    </StyledList>
  )
}

const StyledList = styled.ul`
  padding: 1em;
  margin: 0 10px;
  background: #f0f0f0;
  border-radius: 10px;
  border: 1px solid #14374e;
  margin: 1em 0;

  & li {
    text-align: center;
  }
`;

styled.ul - это displayName, и find не повезло, выбрав его.

Answer 1

Вы можете импортировать искомый компонент, в данном случае StyledList, и использовать его вместо "styled.ul"

import StyledList from ''

wrapper.find(StyledList)

Answer 2

@ Донован опередил меня.

В любом случае, я смог повторить ту же проблему, однако есть два обходных пути:

1. Вместо использования shallow,вы можете mount компонент и затем утверждать: expect(wrapper.find("StyledComponent > ul")).toHaveLength(1);.
2. Вместо mount компонента, вы можете import StyledList from 'path/to/styledList'; и затем утверждать: expect(wrapper.find(StyledList)).toHaveLength(1)

Рабочий пример :