如何在 React with Jest 和 Enzyme 中测试表单提交?无法读取未定义的属性“preventDefault”
Posted
技术标签:
【中文标题】如何在 React with Jest 和 Enzyme 中测试表单提交?无法读取未定义的属性“preventDefault”【英文标题】:How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined 【发布时间】:2017-11-09 04:48:50 【问题描述】:我正在编写一个测试来检查如果登录表单提交时没有数据,是否会显示错误通知组件。
describe('User signin', () =>
it('should fail if no credentials are provided', () =>
const loginComponent = shallow(<Login />);
expect(loginComponent.find('.form-login').length).toBe(1);
loginComponent.find('.form-login').simulate('submit');
expect(loginComponent.find(Notification).length).toBe(1);
);
);
看起来.simulate
正在工作,因为测试达到了我的handleSubmit
函数,但是我在测试中遇到了这个错误:
TypeError: 无法读取未定义的属性“preventDefault”
handleSubmit 函数
handleSubmit(e)
e.preventDefault(); // <-- problem here
const user = this.state.username;
const pass = this.state.password;
const gotoDashboard = () => this.props.history.push('/dashboard');
const postLogin = (user, pass) =>
api.userLogin(user, pass)
如果我删除 e.preventDefault();
行,我的测试将通过,但是我需要该行以防止默认的表单提交事件。
【问题讨论】:
【参考方案1】:很快就想通了...我只需要使用假的 preventDefault 函数创建一个 fakeEvent 并将其传递:
describe('User signin', () =>
it('should fail if no credentials are provided', () =>
const fakeEvent = preventDefault: () => console.log('preventDefault') ;
const loginComponent = shallow(<Login />);
expect(loginComponent.find('.form-login').length).toBe(1);
loginComponent.find('.form-login').simulate('submit', fakeEvent);
expect(loginComponent.find(Notification).length).toBe(1);
);
);
【讨论】:
这个loginComponent.find('.form-login').dispatchEvent(new Event('submit'));
也有用吗?
是否仍会阻止默认设置,或者测试会导致重定向并重新加载?
如何从表单节点获取值?以上是关于如何在 React with Jest 和 Enzyme 中测试表单提交?无法读取未定义的属性“preventDefault”的主要内容,如果未能解决你的问题,请参考以下文章
SonarQube with Jest and react - 覆盖 0 条新线路
[React Testing] Mock react-transition-group in React Component Tests with jest.mock
[React Testing] Hide console.error Logs when Testing Error Boundaries with jest.spyOn
单元测试 react redux thunk dispatches with jest and react testing library for "v: 16.13.1",