Fehler: Diese Methode ist nur gedacht, um ausgeführt werden auf die einzelnen Knoten. 0 statt gefunden
Teste ich eine Tastenbelegung Funktion in einer Komponente. Die Komponente ist ziemlich einfach, um Ereignis-listener für das keyup
und feuert eine redux action, das wird ausblenden der Komponente.
Habe ich aufgeräumt, meinen code hier, um nur die relevanten Informationen. Ich bin in der Lage, um den test zu passieren, wenn ich gerade das Shop Versand, um die Aktion nennen, aber natürlich wird die Niederlage der Zweck dieses Tests. Ich bin mit Enzym zu simulieren, die keyup
Ereignis mit dem entsprechenden event-Daten (keycode für esc
), aber ich komme über die Fehlermeldung unten.
MyComponent.js
import React, {Component, PropTypes} from 'react';
import styles from './LoginForm.scss';
import {hideComponent} from '../../actions';
import {connect} from 'react-redux';
class MyComponent extends Component {
static propTypes = {
//props
};
componentDidMount() {
window.addEventListener('keyup', this.keybindingClose);
}
componentWillUnmount() {
window.removeEventListener('keyup', this.keybindingClose);
}
keybindingClose = (e) => {
if (e.keyCode === 27) {
this.toggleView();
}
};
toggleView = () => {
this.props.dispatch(hideComponent());
};
render() {
return (
<div className={styles.container}>
//render code
</div>
);
}
}
export default connect(state => ({
//code
}))(MyComponent);
MyComponent-test.js
import React from 'react';
import chai, {expect} from 'chai';
import chaiEnzyme from 'chai-enzyme';
import configureStore from 'redux-mock-store';
import {mount} from 'enzyme';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import {MyComponent} from '../../common/components';
import styles from '../../common/components/MyComponent/MyComponent.scss';
const mockStore = configureStore([thunk]);
let store;
chai.use(chaiEnzyme());
describe.only('<MyComponent/>', () => {
beforeEach(() => {
store = mockStore({});
});
afterEach(() => {
store.clearActions();
});
it('when esc is pressed HIDE_COMPONENT action reducer is returned', () => {
const props = {
//required props for MyComponent
};
const expectedAction = {
type: require('../../common/constants/action-types').HIDE_COMPONENT
};
const wrapper = mount(
<Provider store={store} key="provider">
<LoginForm {...props}/>
</Provider>
);
//the dispatch function below will make the test pass but of course it is not testing the keybinding as I wish to do so
//store.dispatch(require('../../common/actions').hideComponent());
wrapper.find(styles.container).simulate('keyup', {keyCode: 27});
expect(store.getActions()[0]).to.deep.equal(expectedAction);
});
});
Fehler: Diese Methode ist nur gedacht, um ausgeführt werden auf die einzelnen Knoten. 0 statt gefunden.
in ReactWrapper.single (/Users/[name]/repos/[repoName]/webpack/test.config.js:5454:18 <- webpack:///~/Enzym/build/ReactWrapper.js:1099:0)
in ReactWrapper.simulieren (/Benutzer/[name]/repos/[repoName]/webpack/test.config.js:4886:15 <- webpack:///~/Enzym/build/ReactWrapper.js:531:0)
im Kontext. (/Users/[name]/repos/[repoName]/webpack/test.config.js:162808:55 <- webpack:///src/test/Komponenten/MyComponent-test.js:39:40)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dass Fehler passiert, wenn, wie er sagt, führen Sie es mit einer beliebigen Anzahl von Knoten, die andere als 1.
Ähnlich wie jQuery, Ihre
find
Anruf wird wieder einige Anzahl der Knoten (eigentlich ist es eine einzige wrapper, der weiß, wie viele Knoten Ihrfind
Selektor gefunden hat). Und Sie können nicht nennensimulate
gegen 0 Knoten! Oder mehrere.Die Lösung ist dann, um herauszufinden, warum Ihre Auswahl (die
styles.container
imwrapper.find(styles.container)
) ist 0 zurückgeben Knoten, und stellen Sie sicher, es gibt genau 1, und dannsimulate
funktioniert wie Sie es erwarten.Enzyms debug Methode ist wirklich hilfreich hier. Sie konnte tun
console.log(container.debug())
oder auchconsole.log(container.html())
um sicherzustellen, dass Ihre Komponente ist die Leistung wie erwartet während der Prüfung.