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 是显示名称，find 没有选择它。

Answer 1

您可以导入要搜索的组件，在本例中为 StyledList，并使用它代替 "styled.ul"

import StyledList from ''

wrapper.find(StyledList)

Answer 2

@Donovan 先于我。

无论如何，我能够重现同样的问题，但是，有两个解决方法：

您可以 mount 组件然后声明：expect(wrapper.find("StyledComponent > ul")).toHaveLength(1);.

shallow

您可以 import StyledList from 'path/to/styledList'; 而不是 mounting 组件，然后断言：expect(wrapper.find(StyledList)).toHaveLength(1)

工作示例：

Answer 3

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

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)

这样一来，您就不需要导入样式化的组件了

Jest/Enzyme 带有样式组件

Jest/Enzyme with styled components

reactjs

jestjs

enzyme

styled-components