3
votes

Jest / Enzyme avec des composants stylisés

De toute ma vie, je ne peux pas faire en sorte que Jest / Enzyme joue bien avec des composants stylisés.

J'ai un composant que je monte qui filtre une liste de 5 des expéditions les plus récentes.

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

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

styled.ul est le nom d'affichage et find n'a pas de chance de le sélectionner. p>

reactjs jestjs enzyme styled-components

0 commentaires

3 Réponses :

5
votes

Vous pouvez importer le composant que vous recherchez, dans ce cas StyledList , et l'utiliser à la place de "styled.ul"

import StyledList from ''

wrapper.find(StyledList)

2 commentaires

C'est un ul stylé à l'intérieur d'un composant.

Vous pouvez exporter le composant stylisé afin qu'il puisse être importé et utilisé pour .find dans vos tests

1
votes

@Donovan m'a battu.

Quoi qu'il en soit, j'ai pu reproduire le même problème, cependant, il existe deux solutions de contournement:

Au lieu d'utiliser shallow , vous pouvez monter le composant puis affirmer: expect (wrapper.find ("StyledComponent> ul")). toHaveLength ( 1); .
Au lieu de monter le composant, vous pouvez importer StyledList de 'path / to / styledList'; puis affirmer: expect (wrapper.find ( StyledList)). ToHaveLength (1)

Exemple de travail :

0 commentaires

8
votes

Vous pouvez également renommer votre composant stylisé pour le rendre plus facile à lire. Par exemple

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

test.js

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';

De cette façon, vous n'avez pas besoin d'importer votre composant stylisé

0 commentaires