- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在测试组件中的键绑定(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/
有谁知道蓝牙设备如何获取范围内可发现设备的设备 ID? 理想情况下,我正在寻找涉及蓝牙协议(protocol)最小实现的最简单解决方案。 一个起点会很好,我只是想创建一个设备,它可以以最小的功耗存储附
我有用于搜索Kibana中特定事件的查询,该查询与其他搜索一起保存,是否可以通过REST调用以编程方式更改它? 最佳答案 正如@Mohammad所说,所有与Kibana相关的元数据都存储在elasti
我正在使用带有这些注释的基本集成测试: @ExtendWith(SpringExtension::class) @SpringBootTest(classes = [SomeApplication::
以下是我的代码 HTML: Hello !! Javascript: $(function() { $('#content .child').click(function() {
我试图避免在每个 GDB session 中输入相同的命令。为此,我遵循了 rust discovery book 中的说明。但是当我通过 cargo run 运行程序时,程序没有像书中提到的那样工作
好的,我记得有一些命令可以放在 settings.py 文件中,这样基本上当您将 django 项目移动到另一个目录时,它就不会启动 foo-bar . 我知道我可以通过在它提到主目录的任何地方设置一
假设我正在制作一份注册表单。现在我希望它突出显示四个字段中的空白字段。现在我可以只执行一堆 if-else 语句,但这将花费很长时间。 假设我有以下代码: Javascript: if($firstn
我试图理解 C++ 中 regex 的逻辑 std::string s ("Ni Ni Ni NI"); std::regex e ("(Ni)"); std::smatch sm; std::re
运行时: vim /tmp/blah :q echo $? 我的退出状态为 1 .这破坏了包括 Git 在内的各种东西。如果我在没有 vimrc 的情况下运行 vim: vim -u NONE /tm
我无法通过“查找”来查找旧文件。我将我的发现链接到一个声明中,所有其他部分都运行良好。这是我所拥有的精简版。它搜索 $path 的目录树,并为找到的每个项目创建仅包含换行符的单独临时文件:所有文件、超
我已经多次看到这个问题,但没有一个答案对我有用。 我的 DotNet Core 应用程序失败 编码: public static void Main(string[] args) {
已解决见编辑 2 你好, 我一直在编写一个 Perl 程序来处理本地(专有)程序的自动升级(对于我工作的公司)。 基本上,它通过 cron 运行,不幸的是有内存泄漏(或类似的东西)。问题是泄漏只发生在
在 icCube 中创建到 Oracle 数据库的连接时,“选择现有数据库表”返回一个空的表列表。 连接很好,我可以查询模式创建 SQL 查询。 最佳答案 用户用作模式名称,但 Oracle 使用大写
我正在使用 VBA 循环遍历两个工作表上的行,如果它们匹配,则将工作表 2 中的行复制到工作表 1 中。 我的代码应该: 打开第二个工作簿 将所有信息复制到新工作表上的原始工作簿中 然后循环遍历原始工
当我尝试同步我的数据库时出现这个奇怪的错误: Unhandled rejection Error: Cyclic dependency found. roles is dependent of its
以编程方式发现 perl 模块具有的所有子例程的最佳方法是什么?这可以是一个模块、一个类(没有@EXPORT)或任何介于两者之间的东西。 编辑:下面的所有方法看起来都可以工作。我可能会在生产中使用 C
如何在“讨论”按钮左侧添加“共享”按钮。我希望该按钮与当前的“讨论”按钮具有相同的样式/颜色。 我从https://atmospherejs.com/joshowens/shareit添加了包 我将
我最近从 Netbeans 切换到 Eclipse,Eclipse 在我的项目中发现了许多 Netbeans 没有的语法错误,我不知道为什么。据可以看出,两个 IDE 都设置为使用 java 1.6。
我必须为我的项目设置一些不接受错误网址的规则。我为此使用正则表达式。 我的网址是“http://some/resource/location”。 此网址的开头、中间或结尾不应留有空格。 例如,这些空格
问题:鉴于作为 VMSS 的一部分启动的 N 个实例,我希望每个 Azure 实例上的应用程序代码能够发现其他对等实例的 IP 地址。我该怎么做? 总体目的是对实例进行集群,以提供主动被动 HA 或保
我是一名优秀的程序员,十分优秀!