开玩笑/酶与样式化的组件

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

您还可以重命名样式化的组件，以使其更易于阅读。例如

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;
  }
`;

StyledList.displayName = 'ul';

test.js

expect(wrapper.find('ul')).toHaveLength(1)

那样，您无需导入样式化的组件

Answer 3

@Donovan击败了我。

无论如何，我能够复制相同的问题，但是，有两种解决方法：

1. 您可以shallow而不是使用mount，然后声明：expect(wrapper.find("StyledComponent > ul")).toHaveLength(1);。
2. 您可以mount然后断言：import StyledList from 'path/to/styledList';
，而不是expect(wrapper.find(StyledList)).toHaveLength(1)组件。

工作示例：