Möglichkeit zum Testen der Reihenfolge der Elemente in React

Question

Ich möchte nur den Komponententest für meine Reaktionskomponente mit den Jest und Enzyme implementieren.

Gibt es eine Möglichkeit, die Bestellung zu testen? Lassen Sie uns sagen, ich habe Komponente Button, und ich möchte Symbol und Text zur gleichen Zeit rendern.

Und natürlich ist es gut, die Ausrichtungsoption dem Benutzer zur Verfügung zu stellen (Icon zuerst oder Kinder zuerst).

Button.js

class Button extends React.Component { 
    constructor() { 
     super(); 
    } 
    render() { 
     let content; 
     const icon = (<Icon type='search' />); 
     if (this.props.iconAlign === 'right') { 
      content = (<span>{this.props.children} {icon}</span> 
     } else { 
      content = (<span>{icon} {this.props.children}</span> 
     } 
     return (
      <button>{content}</button> 
     ); 
    } 
} 

Wie die iconAlign Requisiten zu testen, mit Jest und Enzym?

Answer 1

Sie könnten einen flachen Render verwenden und die Ausgabe vergleichen. Ich bin nicht vertraut mit der Jest Syntax, so dass Seite meines Beispiels falsch sein kann (ich schnell auf ihre Website bezeichnet):

import { shallow } from 'enzyme'; 

describe(`Button`,() => { 
    it(`should render the icon on the right`,() => { 
    const children = <div>foo</div>; 
    const actual = shallow(
     <Button iconAlign="right" children={children} /> 
    ); 
    const expected = (
     <button><span>{children} <Icon type='search' /></span></button> 
    ); 
    expect(actual.matchesElement(expected)).toBeTruthy(); 
    }); 
}); 

Und dann könnte man ein weiteren Test für die „linke“ align erstellen.

---

Das Enzym-Version Antwort des @ pshoukry.

describe(`Button`,() => { 
    it(`should render icon on the right`,() => { 
    const wrapper = shallow(
     <Button iconAlign="right"> 
     <div>foo</div> 
     </Button> 
    ); 
    const iconIsOnRight = wrapper.find('span').childAt(1).is(Icon); 
    expect(iconIsOnRight).toBeTruthy(); 
    }); 
}); 

---

Als Referenz hier ist das Enzym flache Rendering-API-Dokumentation: https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md

Answer 2

Überprüfen von der Art der Komponente

prüfen icon erste

var button = TestUtils.renderIntoDocument(<Button />); 

var buttonNode = ReactDOM.findDOMNode(button); 
expect(buttonNode.props.children[0].type.name).toEqual("Icon")