如何解决错误:此方法仅应在单个节点上运行找到0个代替
正如说的那样,当您在除1以外的任意数量的节点上运行该错误时,就会发生该错误。
与jQuery类似,您的find
调用将返回一定数量的节点(实际上,这是一个包装器,它知道find
选择器找到了多少个节点)。而且您不能调用simulate
0个节点!或多个。
然后的解决方案是弄清楚选择器(styles.container
inwrapper.find(styles.container)
)为什么返回0个节点,并确保它恰好返回1,然后simulate
将按预期工作。
const container = wrapper.find(styles.container)
expect(container.length).to.equal(1)
container.simulate('keyup', {keyCode: 27});
expect(store.getActions()[0]).to.deep.equal(expectedAction);
酶的调试方法在这里非常有用。您可以这样做console.log(container.debug())
,或者也console.log(container.html())
可以确保您的组件在测试过程中按预期方式呈现。
解决方法
我正在测试组件中的键绑定功能。该组件非常简单,事件监听器用于keyup
并触发一个 redux操作 ,该 操作 将隐藏该组件。
我已经在这里将代码清理为仅包含相关信息。如果仅使用 商店分派
进行操作调用,我就能通过测试,但是这样做当然会破坏测试的目的。我正在使用酶keyup
用适当的事件数据(的键代码esc
)模拟事件,但遇到以下错误。
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);
});
});
错误:
Error: This method is only meant to be run on single node. 0 found instead.
at ReactWrapper.single (/Users/[name]/repos/[repoName]/webpack/test.config.js:5454:18 <- webpack:///~/enzyme/build/ReactWrapper.js:1099:0)
at ReactWrapper.simulate (/Users/[name]/repos/[repoName]/webpack/test.config.js:4886:15 <- webpack:///~/enzyme/build/ReactWrapper.js:531:0)
at Context.<anonymous> (/Users/[name]/repos/[repoName]/webpack/test.config.js:162808:55 <- webpack:///src/test/components/MyComponent-test.js:39:40)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。