Mocha Mit Komponenten höherer Ordnung zu testen, in

Question

Reagiert ich ein HOC bin mit in einer Komponente reagieren, die wie folgt aussieht:

import React from 'react'; 
import Wrapper from 'wrapper'; 
class Component extends React.Component { 
    render() { 
    return (
     <div className='component' /> 
    ) 
    }; 
} 
export default Wrapper(Component) 

Bei der Prüfung von Komponenten mit Mokka Ich versuche, für einen Klassennamen zu suchen, die enthalten sein sollten innerhalb der Komponente. Wie so:

describe('Component', function() { 
    it('can be mounted with the required class', function() { 
    const component = shallow(
     <Component /> 
    ); 
    expect(component).to.have.className('component'); 
    }); 
}); 

Das Problem ist, dass Mocha nicht innerhalb der Wrapper für die Komponente zu suchen weiß und versucht, es in der HOC zu finden. Was wird es natürlich nicht.

Der Fehler Ich erhalte ist:

AssertionError: expected <Wrapper(Component) /> to have a 'component' class, but it has undefined 
    HTML: 

    <div class="component"> 
    </div> 

Wie kann ich Mocha sagen im HOC für die richtige Stelle des Klassennamens suchen anstelle des HOC selbst?

Answer 1

Das Problem ist die Verwendung von Enzym shallow anstelle von mount, die beim Testen von HOC benötigt wird.

Verwenden Sie also mount.

Ich habe dies zu einem Github-Projekt hinzugefügt, so dass Sie sehen können. Verwenden Sie mein redux-form-test Projekt und stellen Sie sicher, dass Sie den Zweig stackoverflow-question-38106763 verwenden. Siehe die Datei tests/unit/index.js.

Be sure to read the source code of the test file. One of tests fails intentionally to reproduce your issue.

Was in dieser Situation heikel ist, dass die Render-Methode des HOC genau die Komponente repliziert es gewickelt wird. Siehe die render Methode in the source of the react-onclickoutside component you mention. Deshalb ist das AssertionError, das Sie sehen, verwirrend: es zeigt Ihnen HTML, das aussieht, als ob es die Behauptung erfüllt. Wenn Sie jedoch laufen

console.log(component.debug()) 

vor Ihrer expect, wird es

<Component /> 

zeigen Das ist, weil shallow nur eine Ebene tief geht. Und enzym verwendet das gerenderte HTML nicht für die Assertion, es verwendet die React-Elemente, die nicht die Klasse component enthalten, wie Sie sehen können.

Answer 2

Sie Enzym verwenden können .dive()

const component = shallow(<Component />).dive(); 

expect(component.props().className).toEqual('component')