Reactjs 错误：此方法只能在单个节点上运行。改为找到0

我正在测试组件中的键绑定功能。该组件相当简单，用于

键控

的事件侦听器会触发一个redux操作，该操作将隐藏该组件

我已经清理了我的代码，这里只有相关的信息。如果我只使用store dispatch进行操作调用，我就能够通过测试，但这当然会破坏此测试的目的。我使用Ezyme用适当的事件数据模拟

keyup

事件（用于

esc

的keycode），但我遇到以下错误

MyComponent.js

import React，{Component，PropTypes}来自'React'；
从“/LoginForm.scss”导入样式；
从“../../actions”导入{hideComponent}；
从'react redux'导入{connect}；
类MyComponent扩展组件{
静态类型={
//道具
};
componentDidMount（）{
window.addEventListener（'keyup'，this.keybindingClose）；
}
组件将卸载（）{
window.removeEventListener（'keyup'，this.keybindingClose）；
}
keybindingClose=（e）=>{
如果（例如keyCode===27）{
this.toggleView（）；
}
};
切换视图=（）=>{
this.props.dispatch（hideComponent（））；
};
render（）{
返回(
//渲染代码
);
}
}
导出默认连接（状态=>({
//代码
}))（MyComponent）；

MyComponent test.js

从“React”导入React；
从“chai”导入chai，{expect}；
从“柴酶”进口柴酶；
从“redux模拟存储”导入configureStore；
从“酶”导入{mount}；
从'react redux'导入{Provider}；
从“redux thunk”导入thunk；
从“../../common/components”导入{MyComponent}；
从“../../common/components/MyComponent/MyComponent.scss”导入样式；
const mockStore=configureStore（[thunk]）；
让商店；
使用（chaiEnzyme（））；
仅描述（“”，（）=>{
在每个之前（（）=>{
store=mockStore（{}）；
});
之后（（）=>{
store.clearActions（）；
});
它（'当按下esc时隐藏\返回组件动作减速器'，（）=>{
常量道具={
//MyComponent所需的道具
};
常数预期动作={
类型：需要（'../../common/constants/action-types'）。隐藏组件
};
常量包装器=装入(
);
//下面的分派函数将使测试通过，但它当然不会像我希望的那样测试keybinding
//dispatch（require（'../../common/actions'）.hideComponent（））；
find（styles.container）.simulate（'keyup'，{keyCode:27}）；
expect（store.getActions（）[0]）到.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)

错误：此方法只能在单个节点上运行。改为找到0。
在ReactWrapper.single（/Users/[name]/repos/[repoName]/webpack/test.config.js:5454:18上，当您使用除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);

Ezyme的方法在这里非常有用。您可以执行
console.log（container.debug（））
，也可以执行
console.log（container.html（））
，以确保您的组件在测试期间按预期呈现。
如果您有多个html元素，如

dispatch（onAgeUpAction（））}>
变老
分派（onAgeDownAction（））}>
衰老
投递

并通过一个通用查询调用它，如

wrapper.find（'button'）.simulate（'click'）；

它将为您返回所有三个节点。
所以用唯一ID或类名来调用它。
您找不到任何节点，因为您尝试访问的元素处于另一个级别。请按类ID选择特定元素，然后尝试此操作

wrapper.find('LoginForm')
  .dive()
  .find('.CLASS_NAME_OF_ELEMENT')
  .simulate('click');