Enzym: flach machen innere reagieren-redux Komponenten

Question

ich einfach haben reagieren Komponente, dass die Verwendung Karte von antd:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Card } from 'antd'; 

export class TBD extends Component { 

    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <Card title={this.props.pathname}> 
     TODO 
     </Card> 
    ); 
    } 
} 

export let select = (state) => { 
    return state.route; 
}; 

export default connect(select)(TBD); 

Jetzt schreibe ich ein paar einfache Tests und überprüfen möchten, dass meine TBD Komponente Verwendung Karte

import React from 'react'; 
import {mount, shallow} from 'enzyme'; 
import {Provider, connect} from 'react-redux'; 
import {createMockStore} from 'redux-test-utils'; 
import {expect} from 'chai'; 
import chai from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 
chai.use(chaiEnzyme()); 
import { Card } from 'antd'; 
import TBDConnected, {TBD, select} from '../src/js/components/TBD'; 

describe('Fully Connected:', function() { 
    it('show selected item text', function() { 

     const expectedState = {route: {pathname: 'Menu1'}}; 
     const store = createMockStore(expectedState); 
     const ConnectedComponent = connect(select)(TBDConnected); 
     const component = shallow(<ConnectedComponent store={store} />).shallow().shallow(); 
     console.log(component.debug()); 
     expect(component.equals(<Card/>)).is.equal(true); 
    }); 
    }); 

Und es scheitern, weil drei flache mir zurück

<Component title="Menu1"> 
TODO 
</Component> 

Aber ich bin erwarten

<Card title="Menu1"> 
TODO 
</Card> 

Nach einer weiteren render bekomme ich pure html von der rendering karte Ich verstehe nicht warum es es zur Component statt Karte rendert und wie ich das Ergebnis bekommen kann was ich will.

Aktualisieren

Beispiel, dass meine Frage zu vereinfachen. Nächster Test fehlschlagen:

describe('TBD', function() { 
    it('Renders a Card', function() { 
    const component = shallow(<TBD />); 
    console.log(component.debug()); 
    expect(component.equals(<Card/>)).is.equal(true); 
    }); 
}); 

Debug-Ausgabe in der Konsole:

<Component title={[undefined]}> 
TODO 
</Component> 

Aber ich erwarte:

<Card title={[undefined]}> 
TODO 
</Card> 

Answer 1

Problem in Ant Delvelope Komponenten. Ein Teil dieser Komponenten wird als einfache anonyme Funktionen geschrieben, ohne dass React.Component usw. erweitert wird. Im Endergebnis wird es wie <Component /> gerendert, im Browser sieht es wie <StatelessComponent /> aus.

Answer 2

Sie nicht die gesamte angeschlossene Komponente testen müssen. Ich würde die Präsentation reine Komponente zuerst testen (als eine Einheit Test) und dann können Sie die Stecker isoliert testen.

I.E.

import React from 'react'; 
import {shallow} from 'enzyme'; 
import {expect} from 'chai'; 
import chai from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 
chai.use(chaiEnzyme()); 
import { Card } from 'antd'; 
import {TBD} from '../src/js/components/TBD'; 

describe('TBD', function() { 
    it('Renders a Card', function() { 
    const component = shallow(<TBD />); 
    expect(component.equals(<Card/>)).is.equal(true); 
    }); 
    it('sets the right title', function() { 
    const component = shallow(<TBD pathname="example" />); 
    expect(component.prop('title')).is.equal("example"); 
    }); 
}); 

Wie Sie sehen, muss Ihre reine Komponente als reine Funktion getestet werden. Sie übergeben einige Requisiten und erwarten etwas Rendering.

Dann, wenn Sie Ihren Anschluss testen, können Sie behaupten, dass es Karten korrekt stateToProps und die dispatchToProps ...