gpt4 book ai didi

reactjs - 发现错误 : This method is only meant to be run on single node. 0

转载 作者:行者123 更新时间:2023-12-03 13:11:29 25 4
gpt4 key购买 nike

我正在测试组件中的键绑定(bind)功能。该组件相当简单,是 keyup 的事件监听器,并启动一个 redux 操作,该操作将隐藏该组件。

我已经在这里清理了我的代码,仅保留相关信息。如果我只使用存储调度来进行操作调用,我就能够使测试通过,但这当然会破坏此测试的目的。我正在使用 Enzyme 使用适当的事件数据(esc 的键代码)来模拟 keyup 事件,但遇到以下错误。

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)

最佳答案

正如它所说,当您使用除 1 之外的任意数量的节点运行它时,就会发生该错误。

与 jQuery 类似,您的 find 调用将返回一定数量的节点(实际上,它是一个知道您的 find 选择器找到了多少个节点的包装器)。并且您无法针对 0 个节点调用 simulate!或多个。

解决方案是找出为什么您的选择器(wrapper.find(styles.container) 中的 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);

enzyme 的debug方法在这里真的很有用。您可以执行 console.log(container.debug())console.log(container.html()) 来确保您的组件在测试。

关于reactjs - 发现错误 : This method is only meant to be run on single node. 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37381916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com