- 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/
我注意到您可以创建具有 session 持久性的凭据。在这种情况下,这意味着什么?我看不出这与网络服务器 session 有何关联或联系。 iOS 应用程序中是否有单独的 session 概念,因为我
我刚刚开始使用 C# 研究装饰器设计模式。 我做了一个例子,除了一件事外,它的功能和我认为的一样。 我有点理解该模式的全部要点是动态地向对象添加功能。 所以当我像这样创建一个对象时: Inventor
当我打开页面时,出现错误: column user_landings_landing.flow_chatbot_id does not exist LINE 1: ...ding"."message"
在 Java 9 之前,我认为包是促进/强制代码模块化和解决命名空间问题的一种方式。包实际上在解决后者方面做得非常糟糕(com.popkernel.myproject.Employee myEmplo
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我正在测试组件中的键绑定(bind)功能。该组件相当简单,是 keyup 的事件监听器,并启动一个 redux 操作,该操作将隐藏该组件。 我已经在这里清理了我的代码,仅保留相关信息。如果我只使用存储
我对这个功能有一些疑问。 假设我有这个指令: .directive('hello', function () { return { template: 'Hello ',
Mozilla Developer Network documentation for the target attribute of HTML element says : Note: When
it('should call setCampaignDate on click', function () { let spySetCampaign = sinon.spy(wrapper.
我是 Reactjs 的新手,正在尝试使用 Jest 和 enzyme 来测试我的组件。当我尝试模拟点击时它不起作用,我想知道缺少什么? 下面是我的组件: const ViewListComments
由于某些原因,我必须使用 type() 函数在 Django 中创建一个表单类。 我的函数生成器 (makeFurnitureForm()) 的返回语句如下所示: return (type("
一直报错 invalid constructor; your probably meant Account (const Account&). explicit Account (Account ba
我使用的是 Bootstrap 3,我有一个相当标准的页面布局:左侧有一个较宽的列 (.col-md-8),包含纯文本,左侧有一个较窄的列右侧 (.col-md-4),包含一个表单。 每个表单字段依次
考虑使用UNIX套接字作为IPC机制的多个客户端进程与服务器进程联系。 每个客户端代码都在无限循环中运行,以尝试从套接字读取数据或向套接字写入数据。 我的问题:客户如何知道它不是在读取打算由其他进程读
我正在阅读scala doc for the scala.concurrent.duration.Duration class,发现它的开头是: This class is not meant as
此问题有一个后续问题 here . 已关注 this tutorial编译给定的 RegexTestHarness 分别在 console.readLine(String) 和 console.For
得到这段代码: static void prime_test(void) { fprintf(stdout, "child prime_test process started\n");
如果 nil 是用来标记参数结束的,那么我可以使用: [NSArray arrayWithObjects:obj1, obj2, nil, nil, nil]; 第一个 nil 标记数组结束,之后的两
对于此错误的含义是否有简单的解释? error: request for member 'Attributes' in '* printerInfo', which is of pointer typ
我正在尝试通过 user对象作为我的 React Context.Provider 的值如 .然而,React 不喜欢将对象作为子对象传递的想法。这是我收到的错误消息: Error: Objects
我是一名优秀的程序员,十分优秀!